親コンポーネントの変数が変更されたときに子コンポーネントを再ロードします。 Angular2

Question

私は、ヘッダー、フッター、サイドバーなどを読み込むMasterComponentを持っています。ヘッダーには、ユーザーがログインするとオプションが設定されるドロップダウンがあります。ロードする別のルートに移動しても、異なる子コンポーネント。選択されたオプションが変更されるべきではなく、ドロップダウンの値がすべての子コンポーネントでアクセス可能であることを意味します。ドロップダウン値の変更により、現在の子コンポーネントが更新/再ロードされる必要があります。

どのようにこの問題にアプローチする必要がありますか？私は、イベントリスナのような機能をしたい。 MasterComponent Changesのモデルを作成したら、現在の子コンポーネントを再ロードします。 MasterComponentの変数変数の更新で、ChildComponentは更新をリッスンして何らかの関数を実行するか、または何らかのAPIを再度呼び出してChildComponentをリロードします。

// routes 
const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'login', 
     pathMatch: 'full', 
    }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'logout', component: LogoutComponent }, 
    { 
     path: '', 
     component: MasterComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { path: 'record/create', component: RecordCreateComponent }, // create record for selectedRestaurant in MasterComponent 
      { path: 'record/', component: RecordComponent }, // shows all record of current selectedRestaurant in MasterComponent 
      { path: 'record/:id/update', component:RecordUpdateComponent }, // show form to edit record having id 
      { path: 'record/:id', component: RecordComponent }, // show record details having id 
     ] 
    }, 
    { path: '**', redirectTo: 'login' } 
]; 

// MasterComponent

@Component({ 
    selector: 'master', 
    templateUrl: templateUrl, 
    styleUrls:[styleUrl1] 

}) 
export class MasterComponent implements AfterViewInit, OnInit{ 
    restaurants: Array<Restaurant> = []; 
    user:User; 
    selectedRestaurant: Restaurant; 

    constructor(private router: Router, private storageHelper:StorageHelper){ 
    } 
    ngAfterViewInit() { 
    } 
    ngOnInit(){ 
     this.user = JSON.parse(this.storageHelper.getItem('user')); 
     this.restaurants = this.user.restaurants; 
     this.selectedRestaurant = this.restaurants[0]; 
     this.router.navigate(['/record/' + this.selectedRestaurant.id]); 
    } 
    onRestaurantChange(){ 
     this.router.navigate(['/record/' + this.selectedRestaurant.id]); 
    } 
    createRecord(){ 
    } 
} 

Answer 1

使用@Inputは、子コンポーネントにデータを渡し、その@Inputその場で変更かどうかを確認するためにngOnChanges（https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html）を使用します。

角度で

Answer 2

そのテンプレートを含むコンポーネントを更新するには、これにまっすぐ進むソリューションは、あなたのChildComponent上@Input性を有する、そこにあり、あなたの@ComponentデコレータchangeDetectionに追加します。次のようにChangeDetectionStrategy.OnPush：

import { ChangeDetectionStrategy } from '@angular/core'; 
@Component({ 
    selector: 'master', 
    templateUrl: templateUrl, 
    styleUrls:[styleUrl1], 
changeDetection: ChangeDetectionStrategy.OnPush 

}) 
export class ChildComponent{ 
    @Input() data: MyData; 
} 

入力データが変更され、コンポーネントが再レンダリングされた場合、これはすべてのチェック作業を行います