在 Angular 中绑定来自不同控制器的数据答案

【问题标题】：Bind data from a different controller in Angular在 Angular 中绑定来自不同控制器的数据
【发布时间】：2018-06-03 00:29:12
【问题描述】：

角度为 4。

我有导航栏，一个具有不同任务的菜单组件。此任务来自 Web 服务。

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

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

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

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
        );

【问题讨论】：

嘿，这两个答案对您有帮助吗？ :)
@AJT_82 没有，我重新提问here，找到了答案：

标签： html angular typescript data-binding

【解决方案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));

【讨论】：

【解决方案2】：

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

ngAfterViewChecked() {

    this.cdRef.detectChanges();

}

然后导入：

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

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

private cdRef: ChangeDetectorRef

【讨论】：

我做到了，但没有任何反应。 @LéoRoueire