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