角9ng-模板

Question

我有一个角模板，其中包含一个ng模板。我尝试通过ngTemplateOutlet插入一个嵌入式视图。但是，我总是收到以下错误：

core.js:4061错误:检查后ExpressionChangedAfterItHasBeenCheckedError:表达式已更改。以前的值：“未定义”。当前值：“对象对象”。

这是我尝试使用ngTemplateOutlet的一部分

<ng-template [ngTemplateOutlet]="headerLogoMiniComponent?.templateRef"></ng-template>

如果删除这一行，错误将修复。在不移除上述部分的情况下，我该如何解决这个问题呢？

我想我应该添加一个带有*ngIf的条件，以便加载等待headerLogoMiniComponent。(但我不知道怎么做)

声明如下：

@Component({
  selector: 'mk-layout-header-logo-mini',
  template: '<ng-template #templateRef><ng-content></ng-content></ng-template>'
})

export class HeaderLogoMiniComponent {   

@ViewChild('templateRef',{static: false}) public templateRef:TemplateRef<any>; }

@ContentChild(HeaderLogoMiniComponent, {static: false}) public headerLogoMiniComponent: HeaderLogoMiniComponent;

Answer 1

也许你必须检查角度生命周期挂钩。

1. ngOnChanges()

在ngOnInit()之前以及当一个或多个数据绑定输入属性更改时调用。

当角度设置或重置数据绑定输入属性时，

响应.该方法接收当前和以前属性值的SimpleChanges对象。请注意，这种情况经常发生，因此您在这里执行的任何操作都会对性能产生显著影响。

1. ngOnInit()

在第一个ngOnChanges()之后调用一次。

在角第一次显示数据绑定属性之后初始化指令或组件，并设置指令或组件的输入属性。

1. ngDoCheck()

在每次更改检测运行时，在ngOnChanges()之后立即调用，在第一次运行时在ngOnInit()之后立即调用。

检测并对角不能或不会单独检测的变化采取行动。

1. ngAfterContentInit()

在第一个ngDoCheck()之后调用一次。

在将外部内容投影到组件的视图或指令所在的视图后做出响应。

1. ngAfterContentChecked()

在ngAfterContentInit()和每个后续的ngDoCheck()之后调用。

在对投射到指令或组件中的内容进行角度检查后做出响应。

1. ngAfterViewInit()

在第一个ngAfterContentChecked()之后调用一次。

在角初始化组件的视图和子视图或包含指令的视图之后做出响应。

1. ngAfterViewChecked()

在ngAfterViewInit()和每个后续的ngAfterContentChecked()之后调用。

在对组件的视图和子视图，或者包含指令的视图进行角度检查后做出响应。

1. ngOnDestroy()

在角破坏指令或部件之前调用。

在角破坏指令或组件之前进行

清理。取消订阅可观察性并分离事件处理程序以避免内存泄漏。

从视觉上看，如下所示：

​

​

因此，您应该将ViewChild赋值放在ngAfterViewInit()中，将ContentChild赋值放在ngAfterContentInit()生命周期挂钩中。

ngAfterContentInit() {
    this.headerLogoMiniComponent = 'something';
}

ngAfterViewInit() {
    this.templateRef = 'something';
}

Answer 2

首先，这实际上是一个警告，而不是一个错误。

当HTML中的表达式在角检查后发生变化时，将引发ExpressionChangedAfterItHasBeenCheckedError。在DevMode中，更改检测在每一次定期的更改检测运行之后都会增加一个额外的转折，以检查模型是否已经更改。此错误仅在开发模式下抛出，这通常是一个迹象，表明您应该考虑重构代码，因为角警告您，在启用生产模式时，表达式中的此更改不会被捕获。

这类警告的主要根源之一是，您正在AfterViewInit中执行一些代码，这些代码在使用ViewChild时经常发生，因为在调用AfterViewInit之前它是未定义的。

请查看下面的链接，以获得对ExpressionChangedAfterItHasBeenCheckedError..的详细解释和更好的理解

ExpressionChangedAfterItHasBeenCheckedError Explained