Question

像这样对模板进行成像：

<a id="registerLink" *ngIf="!isLoggedIn" #registercontainer>Login</a>

和底层组件为：

@ViewChild('registercontainer')
registercontainer: ElementRef;

...

this.loginService.checkLogin().then((result: boolean) => {
    isLoggedIn = result;
    if(!result) {
         --> HERE
         this.doSomethingWithTheATag(this.registercontainer);
    }
}.catch(error: any) {}

问题是，由于ngIf，组件可能会也可能不会呈现，我可以在什么时候使用该视图？在*ngIf条件成立后，我能否可靠地始终使用它？

同样，如果我使用jquery，我可以在设置应该呈现html的变量后立即使用该值吗？

例如，在我的doSomethingWith(...)我可以致电$('#registerLink').xyz()吗？

如果没有，我怎么知道元素何时被渲染？

非常感谢，

Answer 1

您应该使用AfterViewInit生命周期挂钩：

import {AfterViewInit} from '@angular/core'

ngAfterViewInit() {
    // your ViewChild can be accessed
}

如果更改连接的变量*ngIf，则必须等待一个循环，直到可以在ViewChild上调用操作（直到它在DOM中）。

最简单的方法是将其余逻辑放在setTimeout中。

this.loginService.checkLogin().then((result: boolean) => {
    isLoggedIn = result;
    if(!result) {
         setTimeout(() => {
             this.doSomethingWithTheATag(this.registercontainer);
         });
    }
}.catch(error: any) {}

我可以在什么时候使用生成的HTML？

1 个答案: