Как отловить event в дочернем компоненте?

Question

[Керим Бердимырадов]

В ангулар2 есть компонент, допустим ParentComponent

@Component({
  selector: 'parent',
  template: `<section>
  <my-cool-child-component></my-cool-child-component>
  <button (click)="clickMe()"></button>
</section>`,
  styles: ``,
})
export class ParentComponent  {
  clickMe() {
            //When button is clikced maybe tregger an event, which is need to be caught in child component
  }
}

По нажатию на button, я хочу чтобы дочерний компонент изменил свое состояние

@Component({
  selector: 'my-cool-child-component',
  template: `<div><h1>{{state}}</h1></div>`,
  styles: ``,
})
export class MyCoolChildComponent  {
  private state = 'default';

//On parent button clicked need to change the state
}

Возможно ли в дочернем компоненте отловить событие button click из parent компонента, чтобы я мог изменить значение state в дочернем компоненте?

Заранее спасибо

Answer 1

[Pavel Shvedov]

Плохая архитектура. Компонент, он не должен знать о ком-то, или о чем-то, снаружи себя. Он должен лишь давать наружу какой-либо интерфейс, чтоб им мог управлять родитель. Вам нужно то, что должно меняться в дочерних компонентах хранить в родителе и пробрасывать в дочерний, как @Input() свойство. И при клике в родителе менять эти данные, и они будут обновляться в дочернем компоненте

Answer 2

[Gorovalo]

Parent component

@Component({
  selector: 'parent',
  template: `<section>
  <my-cool-child-component [state]="someData"></my-cool-child-component>
  <button (click)="clickMe()"></button>
</section>`,
  styles: ``,
})
export class ParentComponent  {
someData; 

 clickMe() {
            this.someData = ...;
  }
}

Child component

import { Input } from '@angular/core';

@Component({
  selector: 'my-cool-child-component',
  template: `<div><h1>{{state}}</h1></div>`,
  styles: ``,
})
export class MyCoolChildComponent  {
  @Input() state;
}