Возвращение Viewchild не определено

Question

Я хочу использовать html-якорь с дочерним компонентом. Я пытаюсь использовать @ViewChild, но возвращаемое значение не определено. Ты можешь мне помочь?

Мой заголовокКомпонент:

//My html
<button (click)="scrollToElement(target)"></button>

//My TS
@ViewChild('target', { read: ViewContainerRef }) target;

scrollToElement($element): void {
  console.log($element);
  $element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

Мой домашний компонент (используется для централизации всех компонентов)

<app-header></app-header>
<app-anchor></app-anchor>

Мой ЯкорныйКомпонент:

<div #target>My target</div>

Answer 1

Решение для связи между одноуровневыми компонентами:

Вы должны вызывать @ViewChild только в файле TS того же компонента, а не в другом компоненте.

Итак, в HomeComponentшаблон, мы помещаем идентификатор (#anchor) в <app-anchor>, затем привязываем его к члену HeaderComponent @Input.

Теперь вы можете получить доступ ко всем членам AnchorComponent в HeaderComponent.

Решение -

HomeComponent

<app-header [anchorComponent]="anchor"></app-header>
<app-anchor #anchor></app-anchor>

HeaderComponent :

TS:

@input() anchorComponent:AnchorComponent ;

scrollToElement(): void {
  //This is how to reach to your div#target
  console.log(this.anchorComponent.target);
  ...
}

AnchorComponent

HTML:

<div #target>My target</div>

TS:

@ViewChild('target', { read: ViewContainerRef }) target;