Cannot read property 'nativeElement' в ngAfterContentInit, как получить ссылка на ДОМ элемент?

Question

[Константин]

Код:

@ViewChild('container', { static: true }) container: ElementRef;

ngAfterContentInit() {
        try {
       
            this.mapLoaded = this.mapLibrary.ready;
        } catch (e) {
            console.error(e);
        }
    }

Поулчаю ошибку:

TypeError: Cannot read property 'nativeElement' of undefined

Шаблон:

<app-map-wrapper>
			<div id="map" #container></div>
		</app-map-wrapper>

Comments

[Константин]

Пробовал так же:

@ContentChild('container', { static: true }) container: ElementRef;

Тот же эффект - везде undefind

[Антон Швец]

Подробней напиши, че там откуда берется.

[Константин]

Антон Швец, в скомпилированном приложении в index.html имею компонен с проекцией:

<app-map-wrapper>
	<div id="map" #container></div>
</app-map-wrapper>

Код компонента предоставил на картинке:



Что интересно - в конструкторе компонена app-map-wrapper если вывести все доступные DOM элементы - там будет <div>#map:

constructor(private reonMapLibrary: ReonMapLibrary) {
        var all = document.getElementsByTagName('*');
        console.log(all);
    }

[Константин]

Константин, id у внтреннего блока может быть разный - не обязательно id="map". В целом это может быть любой блочный элемент.

[Константин]

Константин, В песочнице это работает. Странно все:

https://stackblitz.com/edit/angular-content-projec...

[Антон Швец]

Константин, не знаю почему у тебя не работает :)
Советую ContentChildren использовать и следить за его изменением, упрощает работу с изменяющимся шаблоном