Angular2中的子級屬性更改時更新父級屬性（使用路由出口加載的子級組件）

Question

我是Angular 2的新手，我們正在使用router-outlet開發基於菜單的angular應用程序。

我在App.component.html中有一個字段，可以說-JobName，它使用app.component.ts中的屬性和ng-model屬性進行綁定。

用戶可以轉到菜單（例如SelectNewJob），然后可以選擇新的作業。 SelectNewJob是使用路由器出口標簽加載的另一個組件

當用戶在SelectNewJob選項卡中更改作業時，我需要更新app.component.html中的JobName字段。

我怎樣才能做到這一點。？ 我已經嘗試了事件發射器，但是它不能與路由器插座一起使用。 還有其他方法可以實現這一點（使用service..etc）

請幫忙。

Answer 1

解決此問題的簡單方法之一是服務。 您可以在其中放置一些主題，並在組件中訂閱它。 服務主體將如下所示：

private jobName: Subject<string> = new Subject<string>();

public get _jobName(): Observable<string> {
  return this.jobName.asObservable();
}

public updateJobName(name: string): void {
  this.jobName.next(name);
}

不要忘記進口

在您的組件中，您不能做這樣的事情

public jobName: string = '';

constructor(private jobService: JobService) {}

ngOnInit() {
  this.jobService._jobName.subscribe((name: string) => {
    this.jobName = name;
 }
}

public updateName(newName: string): void { 
  this.jobService.updateJobName(newName);
}

其中JobService是您服務的名稱

這種方法將解決您的問題，但不要忘記在ngOnDestroy（）中清除訂閱