Icon not showing when creating embedded view

问题

I am having this layout, inspired by this example, which lets components decide how the header looks like:

<div class="main" [@applicationTransition]="applicationState" fxLayout="column" fxFlexFill>

  <nav class="header" [@headerTransition]="applicationState">
    <ng-container #vcr></ng-container>
  </nav>

  <main class="content" fxLayout="column" fxFlex style="overflow: hidden; height: 100%">
    <router-outlet #o="outlet" fxLayout="column" fxFlex></router-outlet>
  </main>

</div>

However, it seems that using <mat-icon> does not work in this context - at least not completely. If I set an icon like the following:

<div *headerContent>
  <button mat-mini-fab [routerLink]="['/home']">
    <mat-icon>home</mat-icon>
  </button>
</div>

the button icon is not displayed. It only says "home". I have to click the button in order to make the icon show up.

As far as I can tell I am doing the same as in this example:

ngAfterViewInit(): void {
  this
    .headerContentService
    .contents
    .subscribe(ref => {
      if (this.current !== null) {
        this.current.destroy();
        this.current = null;
      }
      if (ref === null) {
        return;
      }
      this.current = this.vcr.createEmbeddedView(ref);
    });
}

I also noticed that setting [routerLink]="['/home']" will throw me the following error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: undefined'. Current value: 'undefined: /home'. 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 ?
    at viewDebugError (core.js:9817)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9795)
    at checkBindingNoChanges (core.js:9962)
    at checkNoChangesNodeInline (core.js:14010)
    ...

If I change the example s.t. I am having a routerLink for a button it is working. I'm not quite seeing the problem.

回答1:

Note: I do not know if this is the most elegant solution so if there is a better way to do this please provide an answer and I am going to accept it.

After reading "Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error" I figured that setTimeout() might solve the problem and indeed it did.

I simply modified the implementation of `ngAfterViewInit() to:

ngAfterViewInit(): void {

  this
    .headerContentService
    .contents
    .subscribe(ref => {

      setTimeout(() => {

        if (this.current !== null) {
          this.current.destroy();
          this.current = null;
        }
        if (ref === null) {
          return;
        }
        this.current = this.vcr.createEmbeddedView(ref);
      });

    });
}

来源：https://stackoverflow.com/questions/50051077/icon-not-showing-when-creating-embedded-view

标签

angular

angular5