Angular: доступ к методу внука и вложенных компонентов с помощью ViewChild

Question

Есть ли способ управлять внуками и вложенными компонентами с помощью ViewChild? Мне нужно получить доступ / запустить общедоступный метод в компоненте Grandchild с верхнего уровня. Похоже, у меня это не работает. Предпочитаю пока не использовать сервис или ввод / вывод.

Он работает для меня только для прямых дочерних компонентов.

Ресурсы:

https://angular.io/api/core/ViewChild

Answer 1

Даже если вы сказали, что не хотите пользоваться услугами, это, вероятно, ваш лучший вариант.

Вы можете следовать этому решению.

С помощью @ViewChild, вы можете следовать этому руководству с компонентом grandchild в компоненте grandparent.

В противном случае вы можете создать "мост" от внука к родителю, а затем от родителя к бабушке и дедушке, используя @Output декоратор.

Дочерний компонент предоставляет свойство EventEmitter, с помощью которого он генерирует события, когда что-то происходит. Родитель связывается с этим свойством события и реагирует на эти события. Свойство EventEmitter дочернего элемента - это свойство вывода, обычно украшенное украшением @Output.

источник

Пример:

Дедушка и бабушка:

<parent (notifyGrandparent)="GrandparentHandle($event)">
</parent>
 ///ts
GrandparentHandle(event){
// do needed work
}

Родитель:

<child (handleNotif)="childEvent($event)">
</child>
@Output() notifyGrandparent= new EventEmitter();
childEvent(event) {
  this.notifyGrandparent.emit('event')
}

Ребенок:

@Output() handleNotif = new EventEmitter
onNotify() {
  this.handleNotif.emit('notify everyone')
}

источник

Вы можете следовать этому руководству по взаимодействию компонентов с этим полным примером stackblitz.

Также вы можете прочитать эту ветку о взаимодействии компонентов

и этот пример с использованием@viewChildren, что интереснее...

Answer 2

Аннотации @ViewChild позволяют получить компонент из вашего представления, используя тип is или используя хэштег

- parent.component.ts

@Component()
export class ParentComponant {

  @ViewChild("childComponent") child : ChildComponant;
  @ViewChild(ChildComponant) ifOnlyOneChildOfThisType : ChildComponant;
  
  // child are only accessible after view init
  ngAfterViewInit() {
     this.child.aPublicMethod();
     this.ifOnlyOneChildOfThisType.aPublicMethod();
  }

}

- parent.component.html

<h1> Hello i'm the parent component </h1>
<child-component #childComponent></child-component>

Если вашему дочернему компоненту необходимо использовать метод из родительского компонента, вы можете использовать Event или напрямую передать метод дочернему компоненту благодаря Input.

Если вы даете метод, вы должны объявить его как стрелочную функцию, иначе вы получите неправильный объект "this".

- parent.component.ts

@Component()
export class ParentComponant {

  @ViewChild("childComponent") child : ChildComponant;
  @ViewChild(ChildComponant) ifOnlyOneChildOfThisType : ChildComponant;
  
  // child are only accessible after view init
  ngAfterViewInit() {
     this.child.aPublicMethod();
     this.ifOnlyOneChildOfThisType.aPublicMethod();
  }

  methodToShare = () => {
     // do something, and "this" is the ParentComponant
  }

}

- parent.component.html

<h1> Hello i'm the parent component </h1>
<child-component [inputMethod]="methodToShare" #childComponent></child-component>

Если у вас есть несколько дочерних компонентов, вы можете использовать аннотацию @ViewChildren, которая позволяет получить список компонентов внутри запроса.

Хоп это поможет