デフォルトでは動的リンクのrouterLinkActiveがアクティブです。角度2

Question

私は2つのリンクとURLを持っていますが、動的に取得するのはngOnInitです。

ngOnInit() { 
     this.dataService.getOptions().subscribe((options: Options) => { 
      if (options.mode.toLowerCase() === "live") { 
       this.dashboardUrl = '/'; 
       this.welcomeUrl = 'welcome'; 
      } else { 
       this.dataService.getName().subscribe((name: string) => { 
        this.dashboardUrl = name; 
        this.welcomeUrl = name + '/welcome'; 
       }); 
      } 
     }); 
    } 

とルート：

<li><a [routerLink]="welcomeUrl" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Getting Started</a></li> 
<li><a [routerLink]="dashboardUrl" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Dashboard</a></li> 

は、ここに私のコンポーネントである

const routes: Routes = [ 
    { path: '', component: DashboardComponent }, 
    { path: 'welcome', loadChildren: 'app/welcome/welcome.module#WelcomeModule' }, 
    { path: ':name', component: DashboardComponent }, 
    { path: ':name/welcome', loadChildren: 'app/welcome/welcome.module#WelcomeModule' }, 
]; 

しかし、私はアプリを起動したときにこれらのリンクがアクティブになります。彼らはURLを変更するリンクをクリックした後、うまく動作し始めています。

デフォルトでは、これらのリンク（URL）は空で常に有効ですか？どうすれば修正できますか？

Answer 1

まず、（[ ]で）[routerLink]を書くことはあなたのコードを読む必要がありますので、ディレクティブは、配列を期待しています：

<a [routerLink]="welcomeUrl" routerLinkActive="active">...</a> 

しかし、私はこの問題は、あなたのコードの非同期な性質によるものだと思います。 routerLinkActiveはを実行してからwelcomeUrlに設定されており、そのジョブは実行できません。

溶液＃1：

<ul *ngIf="welcomeUrl && dashboardUrl"> 
    <li><a [routerLink]="welcomeUrl" routerLinkActive="active">Getting Started</a></li> 
    <li><a [routerLink]="dashboardUrl" routerLinkActive="active">Dashboard</a></li> 
</ul> 

溶液＃を：*ngIf（クイック&汚い）を使用してリンクをラップ

変数が設定されると、それらを表示するだけに、テストであなたのリンクをラップ2：非同期呼び出しを移動する（より堅牢ですが、より多くの作業）

別のオプションは、非同期呼び出しを移動することです - this.dataService.getOptions() - の実行前にの前に、routerLinksを含むコンポーネントがアクティブになります。

それはあなたのコンポーネントが編成されている方法を知らなくても、より具体的には難しいですが、：

• routerLinksを含むコンポーネントがルーティングコンポーネントである場合、あなたはそのルート宣言にresolveのparamを追加することができますし、解決の中にthis.dataService.getOptions()を呼び出してください。解決策は、 "モード"を取得し、ActivatedRoute.data["mode"]経由でコンポーネントに渡します。解決のドキュメントを参照してください：https://angular.io/docs/ts/latest/guide/router.html#resolve-guard
• routerLinksを含むコンポーネントが別のコンポーネントの子コンポーネントある場合は、親の内側this.dataService.getOptions()を呼び出し、@Inputを経由して子供に「モード」を渡すことができます。どちらの場合も

、考え方は同じです：あなたがrouterLinkActive前welcomeUrlとdashboardUrl変数を設定することができますので、routerLinksを含有する成分を活性化前に「モード」を把握するために実行されます。

実際に非同期呼び出しが問題の原因であるかどうかをテストするには、*ngIfソリューションを試して、動作するかどうかを確認してください。