等待 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

处理此问题的更好方法是使用 angular lifecycle hook.

如果它不适用于 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
    });
}

Answer 2

因为 this.arrAnswers 是在 Promise 中初始化的，所以当组件第一次加载时它是未定义的。由于此 <div *ngIf="arrAnswers"> 的计算结果为 false，并且在 ngOnInit 或 ngAfterViewInit 上没有 querySelectorAll 到 return 的元素，因为它们在组件期间都被调用一次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);
  }

也不要忘记在 @ViewChild 上使用 { static: false }，如 here 所述。

这是一个简单的demo

等待 querySelectorAll

Wait for querySelectorAll

javascript

ionic-framework

angular

ionic4