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

我从您的描述中假设您尝试与之通信的两个组件都是顶级＆＃39;组件（您从一个组件路由到另一个组件）。

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

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

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

1 个答案: