0

我正在使用一项服务在子级和父级之间传递数据，目的是根据加载的子级使用子级特定信息更新父级 UI。

服务：

import { Subject } from "rxjs/Subject";

export class ChildDataService {
  private childDetails = new Subject<{}>();

  childLoaded$ = this.childDetails.asObservable();
  changedComponentName(option: {}){
    this.childDetails.next(option);
  }
}

父组件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ChildDataService } from "../core/helpers/child-data.service";
import { Subscription } from "rxjs/Subscription";

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ParentComponent implements OnInit {
  childDetails: {title?: string};

  private subscription:Subscription;

  constructor( private childDataService: ChildDataService) {
    this.childDataService.childLoaded$.subscribe(
      newChildDetails => {
        console.log(newChildDetails);
        this.childDetails = newChildDetails
      });
  }
}

示例子组件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ChildDataService } from "../../core/helpers/child-data.service";

@Component({
  selector: 'app-child-dashboard',
  templateUrl: './child-dashboard.component.html',
  styleUrls: ['./child-dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ChildDashboardComponent implements OnInit {

  constructor(private childDataService: ChildDataService) { }

  public ngOnInit() {
    this.childDataService.changedComponentName({
      title: 'Dashboard'
    });
  }
}

父 HTML：

<div class="subheader">
  <h1>{{ childDetails?.title }}</h1>
  <button *ngIf="childDetails?.title == 'Dashboard'">dashboard</button>
  <button *ngIf="childDetails?.title == 'SecondChild'">Second Child</button>
</div>

使用此设置，当我单击 routerLink 时出现错误“ExpressionChangedAfterItHasBeenCheckedError”，现在如果我再次单击同一链接，错误仍然存​​在，但正确的按钮变为可见。整个周末都无处可去，所以任何帮助都将不胜感激。

4

1 回答 1

0 
public ngOnInit() {
    setTimeout(() => {
        this.childDataService.changedComponentName({
          title: 'Dashboard'
        }), {});
}

它应该工作。

async ngOnInit() {
   await this.childDataService.changedComponentName({
            title: 'Dashboard'
         });
}
于 2017-11-20T13:57:34.983 回答