Ждем querySelectorAll

Question

Я занимаюсь разработкой приложения через Ionic Framework. Я обновил свое приложение с Ionic 3 до Ionic 4. Теперь гиперссылки больше не работают. HTML-контент загружается динамически в зависимости от выбранной страницы. Я прочитал, что должен установить новые eventListeners для моих кликов на моих a элементах.

Я пытаюсь:

ngOnInit()
{
    this.objAnswerService.getAntworten(objFrage).then(arrAnswer =>
    {
        this.arrAnswers = arrAnswer;
    }
}

ngAfterViewInit()
{
    console.log('_enableDynamicHyperlinks');
    this._enableDynamicHyperlinks();
}

private _enableDynamicHyperlinks()
{
    let arrUrls = this._element.nativeElement.querySelectorAll('a');
    console.log(JSON.stringify(arrUrls)); // No elements
    console.log(arrUrls); // Correct elements
    arrUrls.forEach((objUrl) =>{
        console.log('do something'); // Never reached because 0 elements
    });
}

answer.page.html

<div *ngIf="arrAnswers">
    <div *ngFor="let objAnswer of arrAnswers"
         class="antworten">
        <div *ngIf="objAnswer"
             class="antwort">
            <div [innerHTML]="safeHtml(objAnswer.strText)"></div>
        </div>
    </div>
</div>

Как мне ждать, пока querySelectorAll () найдет все существующие элементы?

Answer 1

, поскольку this.arrAnswers инициализируется в Promise, оно не определено при первой загрузке компонента.В результате этого <div *ngIf="arrAnswers"> оценивается как ложное, и нет элементов для querySelectorAll для возврата на ngOnInit или ngAfterViewInit, потому что они оба вызываются один раз во время компонента жизненный цикл .

вам нужно ngAfterViewChecked , который будет вызываться при инициализации this.arrAnswers и обновлении dom.

  ngAfterViewChecked() {
    console.log('_enableDynamicHyperlinks');
    if (!this._element) return;
    let arrUrls = this._element.nativeElement.querySelectorAll('p');
    console.log("arrUrls.length:", arrUrls.length);
    console.log("arrUrls:", arrUrls);
  }

также не забудьте использовать { static: false } в @ViewChild какобъяснил здесь .

вот простая демоверсия

Answer 2

Лучший способ справиться с этим - использовать угловой крючок жизненного цикла.

Если он не работает с ngOnInit(), вы можете взглянуть на ngAfterViewInit(), что ответить после того, как Angular инициализирует представления компонента и дочерние представления / представление, в котором находится директива.

ngAfterViewInit() {
   let arrUrls = this._element.nativeElement.querySelectorAll('a');

    console.log(JSON.stringify(arrUrls)); // No elements
    console.log(arrUrls); // Correct elements

    arrUrls.forEach((objUrl) =>{
        console.log('do smthng'); //Never reached because 0 elements
    });
}