动态创建的组件中的Angular ExpressionChangedAfterItHasBeenCheckedError

Question

I am facing an Issue with Angular and the CdkPortal / CdkPortalHost from @angular/cdk .
I created a service, which allowes me to register a CdkPortalHost with a given name and set it's Component in any moment.

The service looks like this:

private portalHosts : { [location : string] : CdkPortalOutlet } = {};
private portals : { [location : string] : any} = {};

/** Sets the PortalHost for the given location. */
public register(location : string, portalHost : CdkPortalOutlet) {
    this.portalHosts[location] = portalHost;
}

/** Sets the Component for the given location. */
public setComponent<T>(location : string, type : ComponentType<T>) : ComponentRef<T> {
    let ref : ComponentRef<T> = null;
    let portalHost = this.portalHosts[location];
    if (portalHost) {
        if (portalHost.hasAttached()) {
            portalHost.portal.detach();
            this.portals[location] = null;
        }
        ref = portalHost.attachComponentPortal(new ComponentPortal(type));
        this.portals[location] = ref.instance;
    }
    return ref;
}

Then I registered a PortalHost like this:

@ViewChild(PortalHostDirective)
private portalHost : PortalHostDirective;

public ngAfterContentInit() {
    this.dynamicComponentService.register("Location", this.portalHost);
}

In an other Component, which is a child of the Component that registers the PortalHost, I set the dynamic Component like this:

public ngAfterContentInit() {
    this.dynamicComponentService.setComponent("Location", MyDynamicComponent);
}

For testing-purposes I use a simple template for the MyDynamicComponent:

<div *ngIf="true">Test</div>

Now, when I run the App, I get the following error:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'undefined'. Current value: 'true'.
It seems like the view has been created after its parent and its children have been dirty checked.
Has it been created in a change detection hook ?

I have seen a few similar questions, but the "window.setTimeout"-Workaround did not work for me.
Also I tryed differed lifecycle-hooks for the PortalHost-Registration and the Component-Creation but the result was always the same...

I am using Angular 5.0.1 and Material/CDK 5.0.0-rc0.

Am I missing something or is this a bug?
Is it related to Angular/Material#5268

Answer 1

ngAfterContentInit may be too early for the change detection of the portal outlet to take effect. I experienced this exact isuue when registering the portal outlet and register a component to it in an ngOnInit :

this.tabPortalHost = new DomPortalOutlet(
  this.tabContentOutlet.nativeElement,
  this.componentFactoryResolver,
  this.appRef,
  this.injector
);


const portal = new ComponentPortal(this.tabs[0], null, this.injector);
this.tabPortalHost.attach(portal);

When wrapping the last line in a setTimeout , the code works as expected.