如何从父母向孩子发出事件？

我目前正在使用Angular2。通常，我们使用@Output() addTab = new EventEmitter<any>();然后addTab.emit()向父组件发出事件。

从父母到孩子，我们有什么方法可以做副手吗？

使用RxJs，您可以Subject在父组件中声明a 并将其作为Observable子组件传递，子组件只需要订阅this 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();
    }
} 

更新：

Angular 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引用从父级执行子级中的方法。