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

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

Вы можете воспользоваться этим решением.

Используя @ViewChild, вы можете следовать этому руководству. , с компонентом внука в компоненте дедушки и бабушки.

В противном случае вы можете создать «мост» от внука к родителю, а затем от родителя к прародителю, используя декоратор @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, что более интересно ...

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

-- 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 или напрямую передать метод дочернему компоненту благодаря входу.

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

-- 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, которая позволит вам получить список компонентов внутри запроса.

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