创建嵌入式视图时图标不显示答案

【问题标题】：Icon not showing when creating embedded view创建嵌入式视图时图标不显示
【发布时间】：2018-04-26 20:07:06
【问题描述】：

我有这个布局，灵感来自this example，它让组件决定标题的外观：

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

然而，在这种情况下使用<mat-icon> 似乎不起作用——至少不是完全如此。如果我设置如下图标：

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

按钮图标不显示。它只说“home”。我必须单击按钮才能显示图标。

据我所知，我正在做与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);
    });
}

我还注意到设置[routerLink]="['/home']" 会抛出以下错误：

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)
    ...

如果我change the example s.t.我有一个routerLink 的button 它正在工作。我不太明白问题所在。

【问题讨论】：

标签： angular angular5

【解决方案1】：

注意：我不知道这是否是最优雅的解决方案，所以如果有更好的方法来做到这一点，请提供答案，我会接受。

在阅读了“Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error”之后，我认为setTimeout() 可能会解决问题，并且确实做到了。

我只是将`ngAfterViewInit()的实现修改为：

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);
      });

    });
}

【讨论】：