Angular 2 @ViewChild возвращает undefined

Ответ 1

Попробуйте использовать ссылку в шаблоне вместо этого:

<div id='gallery-container' #galleryContainer class='gallery-image-container'>
    <div class='gallery-padding'></div>
    <img class='gallery-image' src='{{ coverPhotoVm }}' />
    <img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>

И используйте имя ref в качестве аргумента:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

ИЗМЕНИТЬ

Забыл упомянуть, что любой объявленный таким образом ребенок доступен только после инициализации представления. В первый раз это происходит в ngAfterViewInit (импорт и реализация интерфейса AfterViewInit).

Имя ссылки не должно содержать тире или это не будет работать

Ответ 2

Иногда, если компонент еще не инициализирован при доступе к нему, вы получаете сообщение об ошибке, указывающее, что дочерний компонент undefined.

Однако, даже если вы обращаетесь к дочернему компоненту в AfterViewInit, иногда @ViewChild все еще возвращал значение null. Проблема может быть вызвана * ngIf или другой директивой.

Решением является использование @ViewChildren вместо @ViewChild и подписка подписки на изменения, которая выполняется, когда компонент готов.

Например, если в родительском компоненте ParentComponent вы хотите получить доступ к дочернему компоненту MyComponent.

import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MyComponent } from './mycomponent.component';

export class ParentComponent implements AfterViewInit
{
  //other code emitted for clarity

  @ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>;

  public ngAfterViewInit(): void
  {
    this.childrenComponent.changes.subscribe((comps: QueryList<MyComponent>) =>
    {
      // Now you can access the child component
    });
  }
}

Ответ 3

Подписка на изменения на

@ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>

подтверждена работа в сочетании с setTimeout() и notifyOnChanges() и тщательная проверка null.

Любой другой подход создает ненадежные результаты и его трудно проверить.

Ответ 4

У меня была похожая проблема. В отличие от вас, мой @ViewChild вернул действительный ElementRef, но когда я попытался получить доступ к его nativeElement, он не был undefined.

Я решил это, установив id как #content, а не как #content = "ngModel".

<textarea type = "text"
    id = "content"
    name = "content"
    #content
    [(ngModel)] = "article.content"
    required></textarea>

Ответ 5

Некий общий подход:

Вы можете создать метод, который будет ждать, пока ViewChild будет готов

function waitWhileViewChildIsReady(parent: any, viewChildName: string, refreshRateSec: number = 50, maxWaitTime: number = 3000): Observable<any> {
  return interval(refreshRateSec)
    .pipe(
      takeWhile(() => !isDefined(parent[viewChildName])),
      filter(x => x === undefined),
      takeUntil(timer(maxWaitTime)),
      endWith(parent[viewChildName]),
      flatMap(v => {
        if (!parent[viewChildName]) throw new Error('ViewChild "${viewChildName}" is never ready');
        return of(!parent[viewChildName]);
      })
    );
}


function isDefined<T>(value: T | undefined | null): value is T {
  return <T>value !== undefined && <T>value !== null;
}

Использование:

  // Now you can do it in any place of your code
  waitWhileViewChildIsReady(this, 'yourViewChildName').subscribe(() =>{
      // your logic here
  })

Ответ 6

У меня была такая же проблема сегодня. Странно с помощью setTimeout у меня сработало:

ngAfterViewInit(){
    setTimeout(_ => console.log('My element: ' + this.galleryContainer), 0);
}