0

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

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

1 回答 1

3

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

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

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

于 2018-01-02T00:20:14.620 回答