Можно отправить данные от родителя дочернему элементу через @Input или вызвать метод родительского объекта от дочернего элемента с помощью @Output, но я бы хотел поступить совершенно иначе, вызывая метод на ребенок от родителя. В основном что-то вроде этого:
@Component({
selector: 'parent',
directives: [Child],
template: '
<child
[fn]="parentFn"
></child>
'
})
class Parent {
constructor() {
this.parentFn()
}
parentFn() {
console.log('Parent triggering')
}
}
и ребенок:
@Component({
selector: 'child',
template: '...'
})
class Child {
@Input()
fn() {
console.log('triggered from the parent')
}
constructor() {}
}
Background - это своего рода запрос "get", то есть для получения обновленного статуса от ребенка.
Теперь я знаю, что могу достичь этого с помощью сервиса и Subject/Observable, но мне было интересно, нет ли чего-то более простого?
Я думаю, что это может быть то, что вы ищете:
https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable
https://angular.io/guide/component-interaction#parent-calls-an-viewchild
Вы можете получить доступ к дочерним свойствам и методам, используя локальные переменные в шаблоне или используя декоратор @ViewChild в классе родительского компонента.
@ViewChild - правильное решение, но приведенная выше документация была для меня немного неясной, поэтому я передаю немного более дружелюбное объяснение, которое помогло мне понять его.
Пусть есть ChildComponent с методом:
whoAmI() {
return 'I am a child!!';
}
И родительский компонент, где мы можем вызвать метод выше, используя технику '@ViewChild':
import { Component, ViewChild, OnInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
@ViewChild(ChildComponent) child: ChildComponent;
ngOnInit() {
console.log(this.child.whoAmI()); // I am a child!
}
}