Child 在 Angular 2 中侦听 parent 事件
Child listens for parent event in Angular 2
在 angular 文档中有一个关于侦听来自 parent 的 child 事件的主题。没关系。但我的目的是相反的!在我的应用程序中有一个 'admin.component' 包含管理页面的布局视图(侧边栏菜单、任务栏、状态等)。
在这个 parent 组件中,我配置了路由器系统,用于在管理员的其他页面之间更改主视图。
问题是更改后保存内容,用户单击任务栏中的保存按钮(位于 admin.component 中)并且 child 组件必须侦听该单击事件以保存人员。
我认为此文档可能对您有所帮助:
事实上,您可以利用父级提供给其子级的可观察对象/主题。类似的东西:
@Component({
(...)
template: `
<child [parentSubject]="parentSubject"></child>
`,
directives: [ ChildComponent ]
})
export class ParentComponent {
parentSubject:Subject<any> = new Subject();
notifyChildren() {
this.parentSubject.next('some value');
}
}
子组件可以简单地订阅这个主题:
@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();
}
}
否则,您可以以类似方式利用包含此类主题的共享服务...
为了后代,我想我会提到更传统的解决方案:简单地获取对 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();
}
}
如果我正确理解这个问题,这里可能会有更简单的方法。假设--
- OP 在 parent 组件中有一个保存按钮
- 需要保存的数据在child个组件中
- child 组件可能需要的所有其他数据都可以从服务中访问
在parent组件中
<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>
并且在 child ..
prop1:boolean;
@Input()
set setProp(p: boolean) {
// -- perform save function here
}
这只是将按钮点击发送到 child 组件。 child 组件可以从那里独立保存数据。
编辑:如果来自 parent 模板的数据也需要随按钮单击一起传递,则也可以使用这种方法。让我知道是否是这种情况,我将更新代码示例。
对于获得 Cannot read property 'notifyMe' of undefined
的人
尝试调用 ngAfterViewInit()
中的方法而不是 ngOnInit()
在 angular 文档中有一个关于侦听来自 parent 的 child 事件的主题。没关系。但我的目的是相反的!在我的应用程序中有一个 'admin.component' 包含管理页面的布局视图(侧边栏菜单、任务栏、状态等)。 在这个 parent 组件中,我配置了路由器系统,用于在管理员的其他页面之间更改主视图。 问题是更改后保存内容,用户单击任务栏中的保存按钮(位于 admin.component 中)并且 child 组件必须侦听该单击事件以保存人员。
我认为此文档可能对您有所帮助:
事实上,您可以利用父级提供给其子级的可观察对象/主题。类似的东西:
@Component({
(...)
template: `
<child [parentSubject]="parentSubject"></child>
`,
directives: [ ChildComponent ]
})
export class ParentComponent {
parentSubject:Subject<any> = new Subject();
notifyChildren() {
this.parentSubject.next('some value');
}
}
子组件可以简单地订阅这个主题:
@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();
}
}
否则,您可以以类似方式利用包含此类主题的共享服务...
为了后代,我想我会提到更传统的解决方案:简单地获取对 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();
}
}
如果我正确理解这个问题,这里可能会有更简单的方法。假设--
- OP 在 parent 组件中有一个保存按钮
- 需要保存的数据在child个组件中
- child 组件可能需要的所有其他数据都可以从服务中访问
在parent组件中
<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>
并且在 child ..
prop1:boolean;
@Input()
set setProp(p: boolean) {
// -- perform save function here
}
这只是将按钮点击发送到 child 组件。 child 组件可以从那里独立保存数据。
编辑:如果来自 parent 模板的数据也需要随按钮单击一起传递,则也可以使用这种方法。让我知道是否是这种情况,我将更新代码示例。
对于获得 Cannot read property 'notifyMe' of undefined
尝试调用 ngAfterViewInit()
中的方法而不是 ngOnInit()