Angular Portal cdkPortal 指令 throw Expression Changed 错误

Question

我使用 Angular Material Portal 将元素移动到另一个地方。

我使用cdkPortal和cdkPortalOutlet 。

我不明白为什么 angular 抛出表达式在这个超级简单的例子中发生了变化

import { Component, ViewChild } from '@angular/core';
import { CdkPortal } from '@angular/cdk/portal';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  @ViewChild(CdkPortal, { static: false }) portal: CdkPortal
}

在此处检查代码： https://stackblitz.com/edit/angular-f6sb21

打开控制台查看错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'portal: undefined'. Current value: 'portal: [object Object]'

Answer 1

您将相同的 object 引用到cdkPortalOutlet 。 您实际上需要另一个带有ViewChild ng-template

<ng-template #templatePortalContent>Hello, this is a template portal</ng-template>

并在 ts 文件中：

// This is the reference for the ng-template that we added
@ViewChild("templatePortalContent", { static: false }) templatePortalContent: TemplateRef<any>;
// This is the variable that will hold the new template
templatePortal;

constructor(private _viewContainerRef: ViewContainerRef, private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.templatePortal = new TemplatePortal(
    this.templatePortalContent,
    this._viewContainerRef
  );
    this.cdr.detectChanges();
}

这是为 TemplatePortal 准备的。

如果您需要一个 ComponentPortal，这意味着如果您已经有一个组件，那么您将需要创建门户并在cdkPortalOutlet而不是templatePortal变量中分配它。

this.componentPortal = new ComponentPortal(ComponentPortalExample);

和

<ng-template [cdkPortalOutlet]="componentPortal"></ng-template>

您可以在此处查看更多信息：

这是演示。