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會在訂閱時發出最后一個事件。