Как передать событие от родителя к ребенку?

Ответ 1

Используя RxJs, вы можете объявить объект в своем родительском компоненте и передать его как наблюдаемый для дочернего компонента, дочерний компонент просто должен подписаться на этот Observable.

Родитель-компонентный

private eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next()
}

Родитель-HTML

<child [events]="eventsSubject.asObservable()"> </child>    

Ребенок-компонентная

private eventsSubscription: any

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething())
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe()
}

Ответ 2

Насколько я знаю, есть 2 стандартных способа сделать это.

1. @Input

Всякий раз, когда изменяются данные в родительском элементе, дочерний элемент получает уведомление об этом в методе ngOnChanges. Ребенок может действовать на это. Это стандартный способ взаимодействия с ребенком.

Parent-Component
public inputToChild: Object;

Parent-HTML
<child [data]="inputToChild"> </child>       

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// Whenever the data in the parent changes, this method gets triggered. You 
can act on the changes here. You will have both the previous value and the 
current value here.
}

2. Концепция общего сервиса

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

SharedService
subject: Subject<Object>;

Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

Child-Component
constructor(sharedService: SharedService)
this.sharedService.subject.subscribe((data)=>{

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})

Ответ 3

Используйте декоратор @Input() в дочернем компоненте, чтобы родитель мог привязываться к этому вводу.

В дочернем компоненте вы объявляете его как есть:

@Input() myInputName: myType

Чтобы привязать свойство от родителя к ребенку, вы должны добавить в свой шаблон привязывающие скобки и имя вашего ввода между ними.

Пример:

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

Но будьте осторожны, объекты передаются как ссылка, поэтому, если объект обновляется в дочернем, родительский var будет слишком обновляться. Иногда это может привести к некоторому нежелательному поведению. С первичными типами значение копируется.

Чтобы продолжить читать:

Документы: https://angular.io/docs/ts/latest/cookbook/component-communication.html

Ответ 4

В родительском компоненте вы можете использовать @ViewChild() для доступа к методу/переменной дочернего компонента.

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

Ответ 5

Внутри родителя вы можете связать ребенка с помощью @ViewChild. Когда это необходимо (т.е. Когда событие будет запущено), вы можете просто выполнить метод в дочернем элементе из родителя, используя ссылку @ViewChild.