等待querySelectorAll [英] Wait for querySelectorAll

问题描述

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

I am developing an app via Ionic Framework. I upgraded my app from Ionic 3 to Ionic 4. Now hyperlinks do not work anymore. The HTML content is loading dynamically based on the chosen page. I've read I have to set new eventListeners for my clicks on my a elements.

我正在尝试:

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

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()查找所有现有元素?

How can I wait for querySelectorAll() to find all existing elements?

推荐答案

由于this.arrAnswers在Promise中初始化，因此在加载第一个组件时未定义.因此，<div *ngIf="arrAnswers">的计算结果为false，并且querySelectorAll没有元素可以在ngOnInit或ngAfterViewInit上返回，因为它们在组件

since this.arrAnswers is initialized in a Promise it is undefined when the component fiirst loads. As a result of this <div *ngIf="arrAnswers"> evaluates to false and there are no elements for querySelectorAll to return on ngOnInit or ngAfterViewInit because they both gets called once during component lifecycle.

您需要的是this.arrAnswers初始化且dom为已更新.

what you need is ngAfterViewChecked to be called when this.arrAnswers is initialized and dom is updated.

  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 } >.

also do not forget to use { static: false } on @ViewChild as explained here.

这是一个简单的演示

这篇关于等待querySelectorAll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！