2016-12-17 20 views
0

子コンポーネントからルーティングするときに親コンポーネントを更新する際に問題があります。これは私が研究によって知ったことですが、ngOnInitは一度しか呼び出されませんが、これを回避するにはどうすればいいですか?私は別のライフサイクルフックを試しましたが、私はそれらを正しく使用できなかったか、まったく使用しないでください!誰かが助けてくれますか?ありがとう!子コンポーネントからナビゲートするときに親コンポーネントを更新するコンポーネント(角)

マイルート:ダッシュボードコンポーネントに

{ 
    path: 'dashboard', 
    component: DashboardComponent, 
    children: [ 
     { 
      // when user is on dashboard component, no child component shown 
      path: '', 
     }, 

     { // detail component 
      path: ':table/:id', // 
      component: DetailComponent, 
     }, 
     //some more child routes and components... 
    ] 
} 

ngOnInit(親)

ngOnInit() { 
    this.getSomething1(); // this populates an array 
    this.getSomething2(); // this populates an array 
} 
ユーザは、上記配列のいずれかから項目をchosesが

、ユーザは、そのアイテムの詳細ページ(にルーティングされますDetailComponent)ここで、ユーザーはその項目を更新/削除できます。ユーザーがアイテムを削除するとき、ユーザーはparentComponentをルーティングされる子コンポーネントで

方法、:

deleteItem(item: any) { 
    // some code... 
    this._router.navigate(['dashboard']); 
} 

だから、すべてがngOnInitが一度だけ呼ばれているので、項目の配列は、更新されないことを除いて、正常に動作します。

子コンポーネントDetailComponentからDashboardComponentにユーザーが戻ったときに、getSomething1()getSomething2()のメソッドを実行したいと思います。

ありがとうございました!

答えて

3

この状況を回避するには、科目を使用します。

public static returned: Subject<any> = new Subject(); 

そして、それを購読する:あなたは件名を宣言することができDashboardComponentで

constructor() { 
     DashboardComponent.returned.subscribe(res => { 
     this.getSomething1(); // this populates an array 
     this.getSomething2(); 
     }); 
    } 

をDetailComponentでは、項目を削除した後、あなたは対象の次の呼び出し

deleteItem(item: any) { 
    // some code... 
    DashboardComponent.returned.next(false); 
    this._router.navigate(['dashboard']); 
} 
+0

ありがとうございます、これは魅力的です! 'DetailComponent.returned.next(false)'を 'DashboardComponent.returned.next(false)'に変更するだけで、私はその答えを受け入れます! :) 本当にありがとう!! – Alex

+0

心配なし@ASomeOneJ!間違いを変更しました。 –

関連する問題