@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+?
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 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 сейчас работает немного по другому.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
16 сент. 2019, в 16:51
10000 руб./за проект
16 сент. 2019, в 16:47
25000 руб./за проект
16 сент. 2019, в 16:31
5000 руб./за проект