创建嵌入视图时未显示图标 [英] Icon not showing when creating embedded view

问题描述

我有这个布局，灵感来自 这个例子，它让组件决定标题的样子:

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

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

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

按钮图标不显示.它只说家".我必须点击按钮才能显示图标.

据我所知，我和 这个例子:

ngAfterViewInit(): void {这个.header 内容服务.内容.订阅(参考 => {if (this.current !== null) {this.current.destroy();this.current = null;}如果(参考 === 空){返回;}this.current = this.vcr.createEmbeddedView(ref);});}

<小时>

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

ERROR 错误:ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改.以前的值:'未定义:未定义'.当前值:'未定义:/home'.似乎该视图是在其父级和子级被脏检查后创建的.它是在更改检测挂钩中创建的吗?在 viewDebugError (core.js:9817)在 expressionChangedAfterItHasBeenCheckedError (core.js:9795)在 checkBindingNoChanges (core.js:9962)在 checkNoChangesNodeInline (core.js:14010)...

<小时>

如果我更改示例 st我有一个 routerLink 用于 button 它正在工作.我不太明白问题所在.

解决方案

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

<小时>

阅读您需要了解的关于 ExpressionChangedAfterItHasBeenCheckedError 错误 的一切"我认为 setTimeout() 可能会解决问题，而且确实做到了.

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

ngAfterViewInit(): void {这个.header 内容服务.内容.订阅(参考 => {setTimeout(() => {if (this.current !== null) {this.current.destroy();this.current = null;}如果(参考 === 空){返回;}this.current = this.vcr.createEmbeddedView(ref);});});}

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.

解决方案

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

    });
}

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