子から親に移動し、親の関数を実行するAngular2

Question

私は、子コンポーネントの1つから親に戻るときにデータベースから取得する必要のあるデータを持つ親を持っています。この子供はルータ出口で表示されます。

私たちはログインページから親に移動し、子は表示されません。私は親にリストを持っています。これはページに移動するとデータベースから取得します

constructor(private todoService: TodoService) { 
    this.todoService.getData() 
    .subscribe(data => this.data) 
} 

これはうまくいきます。このリストが表示され、ユーザーがこれらの項目のいずれかを選択すると、ユーザーgetは1つの子にナビゲートされ、そこで新しい値で更新され、親に戻るようにナビゲートされます。同様に：

update(todo) { 
    this.service.updateData(todo) 
    .subscribe(data => { 
     console.log(data); 
     this.router.navigate(['parent']) 
    }); 
} 

問題：ユーザーが親に戻ってナビゲートなると、親リストが更新されません、私は親が常にあるためであると思いますか？私がリストをリフレッシュするとOKです。そのため、子での更新が機能します。

コンストラクタにあるthis.todoService.getData()を親コンポーネントに実行させると、データベースから新しいバージョンのデータが得られるので、ページを更新する必要はありません。

Answer 1

あなたのお子様は、ルータのアウトレットの後ろにいるとお伝えしました。あなたは共有サービスを使うことができますが、ここでは、関数を実行するように親に指示するだけでよいので、ここでは過度のことかもしれません。そのため、必要な機能を実行するために親に指示するSubjectを代わりに使用します。

ところで、代わりにOnInitに親にあなたの関数を移動：

ことが行われている

ngOnInit() { 
    this.todoService.getData() 
    .subscribe(data => { 
     this.data = data; 
    }); 
} 

、親コンストラクタの内部で、あなたの親

public static updateList: Subject<boolean> = new Subject(); 

に件名を宣言子アクションに耳を傾け、サブスクライブそれまで：

お子様の場合：

update(todo) { 
    this.service.updateData(todo) 
    .subscribe(data => { 
     console.log(data); 
     // add this! 
     ParentComponent.updateList.next(true); 
     this.router.navigate(['parent']) 
    }); 
}