创建嵌入视图时未显示图标

时间:2018-04-26 20:07:07

标签: angular angular5

我有这个布局,灵感来自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它正在运行。我没有看到这个问题。

1 个答案:

答案 0 :(得分:0)

  

注意:我不知道这是否是最优雅的解决方案,所以如果有更好的方法,请提供答案,我将接受它。

阅读&#34; Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error &#34;我认为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);
      });

    });
}