Javascript 孩子在 Angular 2 中监听父事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37677122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Child listens for parent event in Angular 2
提问by Hamed Hamedi
In angular docs there is a topic about listening for child events from parents. That's fine. But my purpose is something reverse!. In my app there is an 'admin.component' that holds the layout view of admin page (sidebar menu,task bar, status etc..). In this parent component I configured router system for changing the main view between other pages of administrator. The problem is for saving things after change, the user clicks on save button in task bar (that is placed in admin.component) and the child component must listen to that click event for doing save staff.
在 angular 文档中有一个关于从父母那里监听孩子事件的主题。没关系。但我的目的是相反的！。在我的应用程序中有一个“admin.component”，它包含管理页面的布局视图（侧边栏菜单、任务栏、状态等）。在这个父组件中，我配置了路由器系统以在管理员的其他页面之间更改主视图。问题是为了在更改后保存东西，用户单击任务栏中的保存按钮（放置在 admin.component 中），子组件必须监听该单击事件才能保存人员。
回答by Stephen Paul
For the sake of posterity, just thought I'd mention the more conventional solution to this: Simply obtain a reference to the ViewChild then call one of its methods directly.
为了后代，我想我会提到更传统的解决方案：只需获取对 ViewChild 的引用，然后直接调用其方法之一。
@Component({
selector: 'app-child'
})
export class ChildComponent {
notifyMe() {
console.log('Event Fired');
}
}
@Component({
selector: 'app-parent',
template: `<app-child #child></app-child>`
})
export class ParentComponent {
@ViewChild('child')
private child: ChildComponent;
ngOnInit() {
this.child.notifyMe();
}
}
回答by Thierry Templier
I think that this doc could be helpful to you:
我认为此文档可能对您有所帮助：
In fact you could leverage an observable / subject that the parent provides to its children. Something like that:
事实上，您可以利用父级提供给其子级的 observable / 主题。类似的东西：
@Component({
(...)
template: `
<child [parentSubject]="parentSubject"></child>
`,
directives: [ ChildComponent ]
})
export class ParentComponent {
parentSubject:Subject<any> = new Subject();
notifyChildren() {
this.parentSubject.next('some value');
}
}
The child component can simply subscribe on this subject:
子组件可以简单地订阅这个主题：
@Component({
(...)
})
export class ChildComponent {
@Input()
parentSubject:Subject<any>;
ngOnInit() {
this.parentSubject.subscribe(event => {
// called when the notifyChildren method is
// called in the parent component
});
}
ngOnDestroy() {
// needed if child gets re-created (eg on some model changes)
// note that subsequent subscriptions on the same subject will fail
// so the parent has to re-create parentSubject on changes
this.parentSubject.unsubscribe();
}
}
Otherwise, you could leverage a shared service containing such a subject in a similar way...
否则，您可以以类似的方式利用包含此类主题的共享服务......
回答by charsi
A more bare bones approach might be possible here if I understand the question correctly. Assumptions --
如果我正确理解了这个问题，这里可能会采用更简单的方法。假设——
- OP has a save button in the parent component
- The data that needs to be saved is in the child components
- All other data that the child component might need can be accessed from services
- OP在父组件中有一个保存按钮
- 需要保存的数据在子组件中
- 可以从服务访问子组件可能需要的所有其他数据
In the parent component
在父组件中
<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>
And in the child ..
而在孩子..
prop1:boolean;
@Input()
set setProp(p: boolean) {
// -- perform save function here
}
This simply sends the button click to the child component. From there the child component can save the data independently.
这只是将按钮点击发送到子组件。从那里子组件可以独立保存数据。
EDIT: if data from the parent template also needs to be passed along with the button click, that is also possible with this approach. Let me know if that is the case and I will update the code samples.
编辑：如果来自父模板的数据也需要与按钮单击一起传递，那么这种方法也是可能的。如果是这种情况，请告诉我，我将更新代码示例。
回答by Bazidoa
For those who are getting Cannot read property 'notifyMe' of undefined
对于那些正在获得 Cannot read property 'notifyMe' of undefined
Try calling the method inside ngAfterViewInit()intead of ngOnInit()
尝试调用该方法中ngAfterViewInit()的这一翻译ngOnInit()
