Блог

Создание шаблона, подобного этому:

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

и базовый компонент как:

 @ViewChild('registercontainer')
registercontainer: ElementRef;

...

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

Вопрос в том, поскольку из-за ngIf компонент может отображаться или не отображаться, в какой момент я могу использовать представление? Могу ли я всегда надежно использовать его сразу после *ngIf того, как условие становится истинным?

Аналогично, если я использую jquery , могу ли я сразу после установки переменной, которая должна отображать html, использовать значение?

Например, в моем doSomethingWith(...) can я могу позвонить $('#registerLink').xyz() ?

Если нет, то как я могу узнать, когда элемент отображается?

Большое спасибо,

Вы должны использовать AfterViewInit перехват жизненного цикла:

 import {AfterViewInit} from '@angular/core'

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

Если вы измените подключенную переменную *ngIf , вам придется ждать цикла, пока вы не сможете вызывать операции над ViewChild (пока он не окажется в DOM).

Самый простой способ сделать это — поместить остальную часть вашей логики в setTimeout .

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