Question

我是Angular 2的新手。我们正在使用Router-Outlet开发基于菜单的Angle App。

我在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（）中清除订阅

Angular2中的子级属性更改时更新父级属性（使用路由器出口加载的子级组件）

1 个答案: