我目前正在使用 Angular 2。通常我们使用@Output() addTab = new EventEmitter<any>(); 然后addTab.emit() 向父组件发出事件。
我们有什么办法可以做到这一点，从父母到孩子？
【问题讨论】：
标签： angular typescript
使用RxJs，你可以在你的父组件中声明一个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();
}
【讨论】：
this.eventsSubject.next({data}); 在父级中，然后this.events.subscribe(({data}) => doSomething(data)); 在子级中。
eventsSubject 转换为 Observable 而不是仅仅将其作为主题订阅？
据我所知，有两种标准方法可以做到这一点。
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.
}
创建服务并在共享服务中使用可观察对象。孩子 订阅它，只要有变化，就会通知孩子。这也是一种流行的方法。当您想要发送除了作为输入传递的数据之外的其他内容时，可以使用它。
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.})
【讨论】：
<child [data]="inputToChild"> </child> 可能应该是 <child [data]="(inputToChild)"> </child> 以获得更改
在父组件中，您可以使用@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 })
【讨论】：
numberComponent 将是undefined。
在子组件中使用 @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 引用从父级执行子级中的方法。
【讨论】：
以前的解决方案都不适合我，因为我有一个嵌套递归子组件。所以我通过使用 OnChanges 函数使用了以下方法。
父组件
buttonToggle: boolean = false;
buttonClick(): void {
this.buttonToggle = !this.buttonToggle;
}
父 HTML
<appNestedChildItemComponent [buttonTrigger]="buttonToggle"></appNestedChildItemComponent>
递归嵌套子组件
export class NestedChildItemComponent implements OnInit, OnChanges {
@Input() buttonTrigger: boolean;
buttonToggle: boolean = false;
ngOnInit() {
this.buttonToggle= buttonToggle;
}
ngOnChanges(changes: SimpleChanges) {
if (changes['buttonTrigger'] && changes['buttonTrigger']?.previousValue != changes['buttonTrigger']?.currentValue) {
this.buttonToggle= !this.buttonToggle;
// Do Something triggered by the parent button.
}
}
}
【讨论】：