@mr_blond97

Как использовать ViewChild для динамически создаваемых едементов в Angular2+?

В темплейте компоненты два html елемента, первый выводится при инициализации компоненты, другой выводится по условию *ngIf="isDivShown".

let { Component, NgModule, Input, ViewChild } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<div #myelement1>Element_1</div>
  	<div #myelement2 *ngIf="isDivShown">Element_2</div>
    <button (click)="changeObject()">Change the objects</button>
  `,
})
class HomeComponent {
		@ViewChild('myelement1') private el1: ElementRef;
		@ViewChild('myelement2') private el2: ElementRef;
    isDivShown = false;
    
    changeObject() {
      this.isDivShown = true;
      this.el1.nativeElement.className = 'myCSSclass_1';
      this.el2.nativeElement.className = 'myCSSclass_2';
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);


isDivShown при инициализации ==  false. При вызове метода changeObject() isDivShown приравнивается true и после идет обращение к this.el2.nativeElement.className. На этом шаге возникает ошибка:

Cannot read property 'nativeElement' of undefined


Пример на jsfiddle.

Как использовать ViewChild для динамически создаваемых едементов в Angular2+?
  • Вопрос задан
  • 41 просмотр
Пригласить эксперта
Ответы на вопрос 1
Xuxicheta
@Xuxicheta
инженер
Так вы меняете переменную, а потом сразу же ожидаете что появится el2, конечно же его нет, дайте Ангуляру время сделать свою работу.

public changeObject() {
    this.isDivShown = true;
    setTimeout(() => this.changeClasses());
  }

  private changeClasses() {
    this.el1.nativeElement.className = 'myCSSclass_1';
    this.el2.nativeElement.className = 'myCSSclass_2';
  }


ну и конечно же, правильно делать это совсем не так, а
<div [class.myCSSclass_1]="isDivShown">Element_1</div>
<div *ngIf="isDivShown" [class.myCSSclass_2]="isDivShown">Element_2</div>
<button (click)="isDivShown = true">Change the objects</button>

без обращений к хмтл-элементам в методах

p.s. в вашем примере Angular4, уже как бы не актуально, тот же ViewChild сейчас работает немного по другому.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы