Angular 8 возврат HTML от визуализированного компонента - PullRequest
Новая
       37

Angular 8 возврат HTML от визуализированного компонента

0 голосов
/ 17 февраля 2020

Я хочу динамически сгенерировать компонент для извлечения его 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;
  }

Текстовый компонент 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.

Я попытался решить эту проблему следующим образом: вставив changeDetectorRef в TextComponent и вызвав его функцию detach () для нескольких хуков жизненного цикла, например: ngAfterViewInit, ngOnDestroy, ngOnInit

Вызов detach () - функция в cmpRef.hostView, вызов detach () - функция для cmpRef.changeDetectorRef.

В документации сказано - для локальных обнаружений изменений я буду вызывать .detectChanges () - Функция и .detach () впоследствии: https://angular.io/api/core/ChangeDetectorRef

я правильно понял? Есть идеи?

...