角度2-我有3個標頭組件。 如何最好地切換這2個標題？

Question

角度2-當用戶登錄我的網站時，我想更改標題。 我有2個標頭組件。 如何做到最好？

目前，我有3個標頭，並且在app.ts模板中使用“ ng-if”並基於變量進行切換。

這種方法目前有效，但是由於這個原因，我擊中了app.ts文件3次。

我正在使用angular2和打字稿。

目標是在登錄時將標頭更改為一種用戶類型，然后如果我以另一用戶類型登錄，則顯示其他標頭。 還有一個外部標頭（app.ts文件中總共3個im切換）。

我基本上不希望app.ts文件被點擊3次。

這是我頂部的app.ts代碼：

 @Component({
     selector: 'app',
     providers: [UserService, UserProfile]
 })

 @View({
     template: `
         <HeaderNavigation *ng-if="!isLoggedIn" [hidden]="!isPageLoadReady"></HeaderNavigation>     
        <HeaderNavigationLoggedIn *ng-if="isLoggedIn && !isCompanyLogin" [hidden]="!isPageLoadReady"></HeaderNavigationLoggedIn>
         <HeaderNavigationLoggedInCompany *ng-if="isLoggedIn && isCompanyLogin" [hidden]="!isPageLoadReady"></HeaderNavigationLoggedInCompany>

         <div class="content">
             <router-outlet></router-outlet>    
         </div>
     `,
     directives: [RouterOutlet, RouterLink, HeaderNavigation,      HeaderNavigationLoggedIn, HeaderNavigationLoggedInCompany, NgIf]
 })

 @RouteConfig([
     { path: '/', redirectTo: '/login' },
     { path: '/login', component: Login, as: 'Login' }, 
     { path: '/dashboard', component: Dashboard, as: 'Dashboard' }
 ])

*請注意3個標題，其中的標題為：“ HeaderNavigationLoggedIn”

謝謝。

Answer 1

我不明白您的意思是“它因此三次擊中了app.ts”。 在我的代碼中，您僅顯示了一個不同的標頭，基於此標頭，布爾表達式顯示為true。

當然，您可以使用ngSwitch代替，但這與使用三個ngIf指令基本上是相同的。

由於ngIfs，您的頁面不會被調用三次-它會被加載一次，並且DOM會根據情況動態更改。

如果您想花哨的話，我想您可以使用路由指定顯示哪個標題。 對於以下三種情況，您將在主要組件上定義路線：

@RouteConfig([
    {path: '/notloggedin', name: 'NotLoggedIn', component: NotLoggedInHeaderComponent, useAsDefault: true},
    {path: '/loggedin', name: 'LoggedIn', component: LoggedInHeaderComponent},
    {path: '/loggedincompany', name: 'LoggedInCompany', component: LoggedInCompanyComponent}
])

然后，您將構建三個標題組件，每個標題組件可能包括用於主要內容的相同子組件，或者包含不同的組件以根據需要更改用戶體驗。

然后，這些標頭組件上的新RouteConfig裝飾器可能會為應用程序的其余部分復制相同的路由。

我不確定這是否是您要尋找的，因為您所解釋的當前系統並沒有真正出現問題。 但是此系統可能更具模塊化。

更新：

正如@DennisSmolek指出的那樣，由於在標頭代碼中使用[hidden]屬性，您可能會遇到問題。 刪除那些，看看是否能解決閃爍問題。

Answer 2

通過訂閱一個變量更改，我們可以訂閱一個事件以根據需要進行更新。

下面的示例可以為您提供更多幫助：

首先，創建一個服務，負責在組件之間共享路由名稱。 並創建一個新的主題“主題同時作為可觀察者和觀察者”

import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Rx';

@Injectable()
export class RouteNames{
  public name = new Subject();
}

其次，通過將其注入引導程序來在應用程序級別提供服務：

import {RouteNames} from './route-names.service';
bootstrap(AppComponent, [ROUTER_PROVIDERS,RouteNames]);

現在，您需要做的就是將服務注入app.component以及將更改路線名稱的每個組件中。

app.component：訂閱RouteNames.name主題，然后在其上更新變量routeName。

import {RouteNames} from './route-names.service';
@Component({
  selector: 'my-app',
  template: `
    <h1 class="title">{{routeName}}</h1>
    <nav>
      <a [routerLink]="['CrisisCenter']">Crisis Center</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
   ...
})
@RouteConfig([
   ...
])
export class AppComponent {
  routeName = "Component Router";
  constructor(private _routeNames:RouteNames){
    this._routeNames.name.subscribe(n => this.routeName = n);
  }
}

現在，在CrisisCenter上，注入RouteNames服務，然后在RouteNames.name上調用：

import {RouteNames} from '../route-names.service';

@Component({
  ...
})
@RouteConfig([
  ...
])
export class CrisisCenterComponent {
  constructor(private _routeNames:RouteNames){
    _routeNames.name.next('Crisis Center');
  }
}

這就是它，這是工作plunker