Angular 2+：使用 Subjects 的数据绑定在 ngOnInit 中不起作用答案

【问题标题】：Angular 2+: data binding using Subjects is not working in ngOnInitAngular 2+：使用 Subjects 的数据绑定在 ngOnInit 中不起作用
【发布时间】：2018-06-11 15:59:50
【问题描述】：

当页面也在变化时，我需要在两个组件之间传递数据。为此，我实现了一个数据服务：

@Injectable()
export class DatashareService {
    public dataSubject = new Subject<any>();
    public addData(data){
        this.dataSubject.next(data);
    }
}

并使用 addData 方法将数据传递给它：

export class DashboardDialog {
    dashboardName;
    dashboardDescription;
    .....
    addElements() {
            this.dataShare.addData({dashboardName: "a name", dashboardDescription:"a description"});
            this.router.navigate(["dashboards/new"]);
            this.closeDialog();
        }
    }

我在我的其他组件中订阅了它的数据：

export class NewDashboardDesign implements OnInit {
    dashboardName;
    xmlContent;
    constructor(private dataShare: DatashareService) {
    }
    ngOnInit() {
        this.dataShare.dataSubject.subscribe(
            data => {
                this.dashboardName = data.dashboardName;           
                this.xmlContent = "<dashboard>\n" +
                    sprintf("<name> '%s' </name>\n", this.dashboardName) +
                    "</dashboard>\n";
            }
        );
    }

但是，我的 html 元素没有更新为新内容（尽管我得到了数据）：

<mat-form-field>
   <textarea matInput placeholder="XML" [(ngModel)]='xmlContent' #xml></textarea>
</mat-form-field>

【问题讨论】：

在哪里调用服务的addData()方法？调用此方法时是否已创建 NewDashboardDesign？如何为组件提供服务？发布一个完整的最小示例来重现该问题。我们无法猜测您的代码是什么。
您在控制台中看到任何错误吗？如果您在订阅处理程序中设置this.xmlContent = "Hello world"，它会起作用吗？
据我所知，您既没有调用 getData 也没有在示例代码中的某处将服务声明为提供者

标签： angular angular-services angular-observable

【解决方案1】：

根据您的描述，我假设您尝试在其之间进行通信的两个组件都是“顶级”组件（您正在从一个组件路由到另一个组件）。

这意味着他们两个永远不会同时存在。因此，第一个组件是通过 DatashareService“发布”，但第二个组件不在那里接收数据。订阅在事件发出后发生。

要解决此问题，请将您的主题更改为 BehaviorSubject。与 Subject 不同，BehaviorSubject 在订阅时发出最后一个事件。

【讨论】：