Angular 8从渲染的组件返回HTML

Question

我想动态生成一个组件以提取其HTML，从一个函数返回它，并将其作为[innerHTML]传递，以维护具有HTML内容的页面文本。

为了实现我编写了一个服务来生成组件，传递参数，检测更改并返回它的html：

public showText(notation: string, variables: object = {}) {
    const cmpRef: ComponentRef<TextComponent> = this.textFactory.create(this.injector);
    cmpRef.instance.isAdmin = this.isAdmin
    cmpRef.instance.textNotation = notation;
    cmpRef.instance.replaceVariables = variables;

    cmpRef.hostView.detectChanges();

    const textElement = (cmpRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    return textElement.innerHTML;
  }

TextComponent的HTML看起来像这样：

<ng-container *ngIf="isAdmin">
  <a [innerHTML]="textNotation | translate:replaceVariables"></a>
</ng-container>

<ng-container *ngIf="!isAdmin">
  <div [innerHTML]="textNotation | translate:replaceVariables"></div>
</ng-container>

并插入HTML，我这样调用函数：

<div [innerHTML]="ts.showTextbrick('text.key')"></div>

现在是我的问题：

文本实际上已正确呈现。但是我收到一个令人讨厌的错误消息：

“错误错误：” ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改“]]

版本为Angular 8。

我尝试了以下解决方案：在TextComponent中插入changeDetectorRef并在多个生命周期挂钩上调用它的detach（）函数，例如：ngAfterViewInit，ngOnDestroy，ngOnInit

在cmpRef.hostView上调用detach（）函数，在cmpRef.changeDetectorRef。上调用detach（）函数。

文档说-对于本地更改检测，之后我将分别调用.detectChanges（）-Function和.detach（）：https://angular.io/api/core/ChangeDetectorRef

我说对了吗？有任何想法吗？

我想动态生成一个组件以提取其HTML，从一个函数返回它，并将其作为[innerHTML]传递，以维护具有HTML内容的页面文本。为此，我向...

Answer 1

ExpressionChangedAfterItHasBeenCheckedError何时被抛出？