使用可觀察到隱藏導航欄在角2

Question

我的問題是這樣的：

我在app.component有一個導航欄，我想隱藏例如befor有人登錄，只需一個布爾變量設置爲true的ngIf 。

app.component.html：

<navbar *ngIf="_userLoggedIn === true" ></navbar> 
<router-outlet></router-outlet> 

通過網絡搜索，並通過噸的問題，看完後在這裏我想這應該與觀測量來完成。但我無法弄清楚如何以良好的方式使用它們。 我的想法是在全局服務中使用Observable來共享變量，因此child component可以訪問和編輯該變量，如果該observable設置爲true，app.component可以訂閱該變量以將_userLoggedIn更改爲true（初始false）。

使用我login.component與angular2路由器，所以其顯示在<router-outlet>

{ 
     path: '/login', 
     name: 'Login', 
     component: LoginComponent, 
     useAsDefault: true 
    }, 

在該組件我想要設置變量設置爲true successed登錄後。 因此它在app.component中更改，並顯示導航欄。 如果您需要任何進一步的代碼，請告訴我。

如果有人能幫我解決我的問題或爲我的問題找到替代解決方案，那將會很棒。

Answer 1

我有一個類似的問題，在這裏問的問題：How to manipulate a component on specific routes in Angular2

的主要問題是（這就是爲什麼我不建議使用@CanActivate或onActivate），您只能使用上的組件，這些Router utils的哪些路由TO，而不是FROM。例如，如果您的app.component中有一個頂欄或側邊欄，其模板內部有router-outlet，則您無法以良好的方式訪問路線數據。

這就是爲什麼你只能擴展默認的router-outlet並把你的邏輯放在那裏。

隨着@RouteConfig看起來像這樣：

@RouteConfig([ 
{ 
    path: '/login', 
    name: 'Login', 
    component: LoginComponent, 
    data: { 
     hideTopbar: true, 
     hideSidebar: true 
    } 
}, 

，併爲您的app.component看起來像這樣一個模板：

<div class="topbar" *ngIf="showTopbar">...</div> 
<extended-router-outlet></extended-router-outlet> 

你可以在app.component類管理此：

export class AppComponent { 
    showTopbar:boolean; 
    showSidebar:boolean; 

    constructor(private _routingEventService:RoutingEventService) { 
     this._routingEventService.onRouteChanged().subscribe(routeData => { 
      this.showTopbar = !routeData.hideTopbar; 
      this.showSidebar = !routeData.hideSidebar; 
     }); 
    } 
} 

使用注入的routingEventService l艾克接受的答案我上面鏈接：

@Injectable() 
export class RoutingEventService { 
    private _eventEmitter: EventEmitter<any> = new EventEmitter(); 

    routeIsChanging(obj:any) { 
     this._eventEmitter.emit(obj); 
    } 

    onRouteChanged() { 
     return this._eventEmitter; 
    } 
} 

然後終於，建立你的邏輯在新router-outlet指令是這樣的：

@Directive({ 
    selector: 'extended-router-outlet' 
}) 

export class ExtendedRouterOutlet extends RouterOutlet { 
    private parentRouter:Router; 

    constructor(_elementRef: ElementRef, 
       _loader: DynamicComponentLoader, 
       _parentRouter: Router, 
       @Attribute('name') nameAttr: string, 
       private _routingEventService:RoutingEventService) { 
     super(_elementRef, _loader, _parentRouter, nameAttr); 
     this.parentRouter = _parentRouter; 
    } 

    activate(nextInstruction: ComponentInstruction): Promise<any> { 
     this._routingEventService.routeIsChanging({ 
      name: nextInstruction.routeName, 
      hideTopbar: nextInstruction.routeData.data['hideTopbar'], 
      hideSidebar: nextInstruction.routeData.data['hideSidebar'] 
     }); 
     return super.activate(nextInstruction); 
    } 
} 

通過這種方法，你甚至可以處理其他航線具體的邏輯，例如要檢查身份驗證或角色，我在我的回答以下問題相同的方法在這裏解釋：

Fill form after http response in angular2

希望它有幫助。