角度の異なるコントローラからのデータをバインドする

Question

角度4で

私は、さまざまなタスクを持つメニューコンポーネントであるnavbarを持っています。このタスクはWebサービスから発生します。

これらのタスクの1つをメニューからクリックすると、編集タスクコンポーネントがフォームとともに呼び出されます。

編集タスクのフォームのデータは、編集タスクのコンポーネントの一部のフィールドにバインドされているため、フォーム内の何かを変更すると、フォームのヘッダーに反映されます。

ただし、メニューコンポーネントのデータは変更されません。 メニューコンポーネントのデータを更新/バインドするにはどうすればよいですか？私はページを更新したくありません。たぶんソリューションはgetTasks（）関数を呼び出しているが、それはここで私は、タスクのリストを呼び出しedittaskコンポーネント

menu.component.tsで行う必要があります。

ngOnInit() { 
    this.getTasks(); 
} 

getTasks(): void { 
    this.taskService.getTasks() 
     .subscribe(Tasks => this.tasks = Tasks); 
} 

をmenu.component.htmlここで私は、タスクリストを呼び出します。

<li *ngFor="let task of tasks" class="d-inline-block col-md-12"> 
    <a routerLink="/task/{{task.id}}" > {{task.title}}</a> 
    <!-- <span class="close big"></span> --> 
    <button class="close big" title="delete task" (click)="delete(task)">x</button> 
</li> 

編集タスクからフォームを充填した後、私はONS関数を呼び出します

this.taskService.updateTask(task, id) 
     .subscribe(
     // i need to refresh the getTask that is in the menu. 
     // or do something for update the menu task 
     ); 

Answer 1

メニューコンポーネントに検出変更を追加する場合は、ubmit（）を使用します。あなたはとてもメニューコンポーネントでは、データを再フェッチするメニューコンポーネントを伝えるために対象を使用することができ

private cdRef: ChangeDetectorRef 

Answer 2

：

ngAfterViewChecked() { 

    this.cdRef.detectChanges(); 

}  

およびインポート：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; 

とコンストラクタのparamにこれを追加件名を宣言して聞いてください。next：

import { Subject } from 'rxjs/Subject'; 

// ... 

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

constructor(...) { 
    MenuComponent.updateTasks 
    .subscribe(res => { 
     this.getTasks(); 
    }) 
} 

、その後、あなただけのgetTasksを実行するためのメニューコンポーネントを伝えるために被写体にnextを呼び出して、タスクを編集コンポーネントで：

import { MenuComponent } from '....' 

// ... 

this.taskService.updateTask(task, id) 
    .subscribe(() => MenuComponent.updateTasks.next(true));