javascript - 等待 querySelectorAll

Question

我正在通过 Ionic Framework 开发应用程序。我将我的应用程序从 Ionic 3 升级到 Ionic 4。现在超链接不再起作用了。 HTML 内容根据所选页面动态加载。我读过我必须为我对 a 元素的点击设置新的 eventListeners。

我正在尝试:

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">计算结果为 false，并且 querySelectorAll 没有元素返回 ngOnInit或 ngAfterViewInit因为它们都在组件 lifecycle 期间被调用一次.

你需要的是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正如解释的那样 here .

这是一个简单的 demo