绑定Angular中不同控制器的数据

Question

在角4。

我有一个navbar，一个包含不同任务的菜单组件。此任务来自Web服务。

当我从菜单中单击其中一个任务时，它会调用编辑任务组件，其上有一个表单。

编辑任务形式的数据绑定到Edit任务组件的某些字段，因此当我更改表单中的某些内容时，它会反映在表单的标题中。

但菜单组件中的数据不会更改。如何更新/绑定菜单组件中的数据？我不想刷新页面。也许解决方案是调用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>

从编辑任务填写表单后，我调用函数onSubmit（）来调用webservice：

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

您可以使用主题告诉菜单组件重新获取数据，因此在菜单组件中声明主题并听取任何next：

import { Subject } from 'rxjs/Subject';

// ...

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

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

然后在编辑任务的组件中，只需在主题上调用next，告诉菜单组件执行getTasks：

import { MenuComponent } from '....'

// ...

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

Answer 2

如果在菜单组件中添加“检测更改”？

ngAfterViewChecked() {

    this.cdRef.detectChanges();

}    

并导入：

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

并将其添加到构造函数参数：

private cdRef: ChangeDetectorRef