Question

我正在通过Ionic Framework开发应用程序。我已将应用程序从Ionic 3升级到Ionic4。现在，超链接不再起作用。 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上返回，因为它们在组件{{3}中都被调用了一次}。

您需要的是在初始化this.arrAnswers并更新dom时调用lifecycle。

  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);
  }

也不要忘记按照ngAfterViewChecked的说明在{ static: false }上使用@ViewChild。

这是一个简单的here

Answer 2

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

如果它不适用于ngOnInit()，则可以查看ngAfterViewInit()，它是Angular初始化组件的视图和子视图/指令所在的视图后响应的。 / em>

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 }); }

等待querySelectorAll

2 个答案: