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

В настоящее время я использую Angular 2. Обычно мы используем @Output() addTab = new EventEmitter<any>();а затем addTab.emit()для отправки события родительскому компоненту.

Есть ли способ сделать это по-другому, от родителя к ребенку?

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

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

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

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

Родительский HTML

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

Дочерний компонент

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

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

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

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

1. @ Вход

Каждый раз, когда данные в родительском элементе изменяются, дочерний элемент получает уведомление об этом в методе 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.})

В родительском компоненте вы можете использовать @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();
    }
} 

Обновить:

Угловой 8 и далее -

@ViewChild(NumberComponent, { static: false })

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

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

@Input() myInputName: myType

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

Пример :

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

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

Чтобы пойти дальше, прочтите это:

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

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