Angular2では、アクティブなルートに基づいてサイドバーをどのように変更しますか？

Question

私はAngular 2（RC5）とTypescriptを使ってSPAを書いています。私はトップに（Bootstrap 4 Alpha 3を使用して）メインナビゲーションバーとカスタムデザインのサイドバーを持っています。ここではPICです：

ここでの意図は、トップナビゲーションバーを使用してメインの「アプリケーション」にナビゲートすることです。現在、私は3つの主要なアプリをマッピングしています - トラッカー、プロボード、および機器。メインアプリケーションがアクティブになると、サイドバーのリンクが変更されます。上の写真では、サイドバーに 'Proboard'アプリケーションのリンクが表示されています。

アクティブルートに基づいてサイドバーの内容を変更するには、HTMLに「* ngIf」宣言を一切入れないでください。

私は、各アプリケーションのリンクを一覧表示するJSONオブジェクトをバックグラウンドAPIのどこかのコードに配置したいと考えています。以下のようなもの：ユーザは、トップナビゲーションバー上のリンクのいずれかに移動なる場合

[ 
    { proboard: [ 
    { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
    { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
    { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ] 
    }, 
    { tracker: [...] }, 
    { equipment: [...] } 
] 

次に、サイドバーは、HTMLでNgForを使用して、上記アレイ内の内容が取り込まれるであろう。

ご意見やご感想をお寄せください。

Answer 1

私は同じことをしました。ここで私はそれをどのように解決しましたか？

1. サービスを作成した最上位アプリ成分
2. のメニューを作成し、ルートそのストリームに加入
3. を変更するためのサブスクライブ対象ストリームを作成
4. サービスで共通のルーティングテーブルを維持メニューがあるコンポーネントから
5. メニューでコンポーネント内の選択したルートを設定する現在のコンポーネントからsubcription.nextを発行します。

これは、他のタイプのコンポーネントのやりとりで実現できます。ここで角度2つのドキュメントからその詳細は次のとおりです。https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

ここに1つの解決策があります。

あなたの3つのアプリのそれぞれは完全に別々のもの（あなたが定義した通り）を意図しているので、それぞれのアプリで再利用できる完全に独立した 'SideBarComponent'を作ることができます。

@Input（）変数で必要な情報をコンポーネントに与えることができるので、必要なラベル、リンク、アイコンのリストを提供することができます。例えば：

EquipmentComponent.ts

sideBarLinks: any = { proboard: [ 
    { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
    { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
    { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ] 
} 

EquipmentComponent.html

<side-bar [buttons]='sideBarLinks'></side-bar> 

SideBarComponent.ts

@Input() 
buttons: any; 

SideBarComponent.html

// Use 'buttons' to construct your buttons in the sidebar. Possibly using an ng repeater in this template. 

あなたはまさにこれを実装して終了していない場合でも、私はうまくいけば、これは便利です、このあなたが角度2.

で再利用可能なコンポーネントを使用しての方向で考えてますね！

ここでは、コンポーネントのやりとりについて知る必要があるすべてのものがあります。https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 3

2つの可能性のある方法

1 - サイドバーコンポーネントには、ルータの変更を購読するには、しかし、あなたは*ngIf

@Input() 
data: any; 

constructor(private router: Router) { 
    router.changes.subscribe((val) => { 
     if(val === 'noSidebarRoute'){ 
      this.navButtons= false; 
     } 
     else { 
      this.navButtons= navData; 
     } 
    }) 
} 

を使用して終了します

次に親コンポーネントテンプレート内

@Component({ 
    selector: 'parent', 
    template: `<side-bar [data]='navData'></side-bar>` 
}); 

export class Parent{ 

navData = [ 
    { proboard: [ 
     { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
     { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
     { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } 
    ]}, 
    { tracker: [...] }, 
    { equipment: [...] } 
]} 

2 - あなたのアプリでは（またはサイドバーの親コンポーネント）、resolver.resolveComponentを使用してアプリケーションにサイドバーコンポーネントを動的に追加します。この方法では、データバインディング（*ngIf）を使用しません。

sidebarCmpRef:ComponentRef<any>; 

constructor(private router: Router, 
      private viewContainerRef:ViewContainerRef, 
      private resolver:ComponentResolver) { 

    router.changes.subscribe((val) => { 
     if(val === 'noSidebarRoute'){ 
      if(this.sidebarCmpRef){ 
       this.sidebarCmpRef.destroy(); 
       this.sidebarCmpRef 
      } 
     } 
     else{ 
      this.AddSidebar(); 
     } 
    }) 
} 

AddSidebar(){ 
    if(!this.cmpRef){ 
     this.resolver.resolveComponent(<Type>SideBar) 
      .then((factory:ComponentFactory<any>) => { 
      this.cmpRef = this.viewContainerRef.createComponent(factory); 
      this.cmpRef.instance.buttons= navData; 
     }); 
    } 
} 

Answer 4

角度の基本的なアプローチ、つまり経路内の子供を読み込むことをお勧めします。

次のように

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PageNotFoundComponent } from './shared/components/pagenotfound.component'; 

export const appRoutes: Routes = [ 
    { 
    path: 'tracker', 
    loadChildren: 'app/tracker/module#trackermodule', 
    }, 
    { 
    path: 'proboard', 
    loadChildren: 'app/proboard/module#proboard', 
    }, 
{ 
    path: 'equiment', 
    loadChildren: 'app/equiment/module#equiment', 
    }, 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(appRoutes)], 
    declarations: [ 
     PageNotFoundComponent 
    ], 
    exports: [RouterModule] 
}) 

export class AppRouterModule { 
} 

は、あなたの子供/サブモジュールのルーティング設定で

import { RouterModule } from '@angular/router'; 
import { CssComponent } from './view'; 
import { RadioAndCheckBoxComponent } from './radio-and-checkbox/view'; 

export const RouteComponents = [ 
    CssComponent 
]; 

export const Routes = RouterModule.forChild([ 
    { 
    path: '', 
    component: equimentComponent, 
    children: [ 
     { 
     path: 'Home', 
     component: HomeComoponent 
     }, 
     { 
     path: 'Candidates', 
     component: CandidatesComoponent 
     } 
    ] 
    } 
]);