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

我从您的描述中假定，您试图在其之间进行通信的两个组件都是“顶层”组件（您要从一个组件路由到另一个组件）。

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

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