创建嵌入式视图时图标未显示 [英] 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>

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

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

---

我还注意到，设置[routerLink]="['/home']"会引发以下错误:

---

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

---

如果我更改示例 st我正在为button使用routerLink.我不太清楚这个问题.

---

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.

推荐答案

注意:我不知道这是否是最优雅的解决方案，因此，如果有更好的方法，请提供答案，我将接受.

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.

---

在阅读" 您需要了解有关ExpressionChangedAfterItHasBeenCheckedError错误 的所有信息"，我认为setTimeout()可以解决问题，并且确实可以解决问题.

---

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

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

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

    });
}

这篇关于创建嵌入式视图时图标未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！