Angular2 中子属性更改时更新父属性（使用路由器插座加载子组件）

【问题标题】：Update Parent Property When Child Property Changes in Angular2 ( Child component loaded using router-outlet)Angular2 中子属性更改时更新父属性（使用路由器插座加载子组件）
【发布时间】：2018-07-25 11:41:31
【问题描述】：

我对 Angular 2 很陌生。我们正在使用 router-outlet 开发一个基于菜单的 Angular 应用程序。

我在 App.component.html 中有一个字段，比如说 - JobName ，它是使用 app.component.ts 中的属性和 ng-model 属性绑定的。

用户可以进入一个菜单（比如 SelectNewJob ）并选择一个新的 Job。 SelectNewJob 是另一个使用路由器出口标签加载的组件

当用户在 SelectNewJob 选项卡中更改工作时，我需要更新 app.component.html 中的 JobName 字段。

我该怎么做？我已经尝试过事件发射器，但它不适用于路由器插座。有没有其他方法可以实现这一点（使用 service..etc）

请帮忙。

【问题讨论】：

使用服务或尝试使用ngrx来保持全局状态

标签： angular angular2-routing angular2-services

【解决方案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() 中清理订阅

【讨论】：

抛出错误@return this.jobName.asObservable();，说jobName.asObservable()不是函数。