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

Question

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

@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>

Answer 1

根据您的描述，我假设您尝试通信的两个组件都是 'top-level' 组件（您正在从一个组件路由到另一个组件）。

这意味着他们两个从来没有同时存在过。因此，第一个组件通过 DatashareService 'publishing'，但第二个组件不在那里接收数据。订阅发生在事件发出后。

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

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

Angular 2+: data binding using Subjects is not working in ngOnInit

angular-services

angular

angular-observable