Нужен обратный вызов, когда все в порядке, чтобы получить доступ к DOM

Question

У меня есть Angular компонент, который выбирает уценку, преобразует его в HTML, а затем вставляет его в DOM. После вставки выполняется еще несколько манипуляций с DOM. Таким образом, шаблон выглядит так:

<div id="fixroot" [innerHTML]="content"></div>

и компонент выглядит так:

    content: string;

    ...

    async getPage(url: string) {
       try { 
           this.content = this.mdToHtml(await this.http.get(url, { responseType: 'text'}).toPromise();
           setTimeout(() => this.fixupDOM(), 400);

    ....

    fixupDom() {
       const el = document.getElementById('fixroot');
       // do stuff to the DOM element that are children of el

Использование setTimeout здесь действительно ужасно, но без него метод fixupDom не работает, потому что DOM не готов к завершению Promise. Но это должно go.

Мне нужен обратный вызов (вероятно, из HTMLElement el), который вызывает мою подпрограмму, как только структура DOM готова. Я не смог заставить что-либо работать. Кто-нибудь знает правильную функцию?

Answer 1

Вы можете попробовать и использовать хук ngAfterViewInit , который срабатывает после загрузки вашего контента.

Если вы используете ссылку на шаблон для своего div, вы можете получить к ней доступ после ngAfterViewInit пожары.

Это angular способ доступа к DOM, который делает его интегрированным с фреймворком c на случай, если вы захотите работать в сети, и т. Д. c ...

Поскольку вы вставка HTML, которую вы сделали, также необходимо передать HTML через Sanitizer , потому что angular имеет контекст очистки из-за XSS.

Answer 2

ngAfterContentInit ловушка жизненного цикла вызывается ранее при создании и визуализации компонента и директивы.

Вы можете реализовать ее в своей директиве и получить доступ к содержимому, которое будет отражено в виде директивы. Например,

ngAfterContentInit() {
  const el = this.content.nativeElement;
  // mutate el as desired  
}