Як передавати подію від батька до дитини?

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

Чи існує спосіб, коли ми можемо це зробити віце-церсі, від батька до дитини?

Використовуючи RxJs , ви можете оголосити a Subjectу своєму батьківському компоненті та передати його Observableдочірньому компоненту, дочірній компонент просто повинен підписатися на це Observable.

Батько-компонент

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

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

Parent-HTML

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

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

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

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

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

Наскільки я знаю, є 2 стандартних способи зробити це.

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>

Але будьте обережні, об'єкти передаються як орієнтир, тому, якщо об’єкт буде оновлено у дочірніх, вар батьків буде занадто оновленим. Це може призвести до небажаної поведінки колись. При первинних типах значення копіюється.

Щоб продовжити, прочитайте це:

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

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