有没有办法使用ViewChild控制Grandchildren和嵌套组件?我需要从顶层访问/运行Grandchild组件中的公共方法。对我来说似乎不起作用。现在最好不要使用服务或输入/输出。
它对我来说只适用于直接子组件。
资源:
它对我来说只适用于直接子组件。
资源:
@ViewChild
,您可以按照 this 指南,在祖父组件中使用孙子组件。@Output
装饰器。
当发生某些事情时,子组件会公开一个 EventEmitter 属性来发出事件。父组件绑定到该事件属性并对这些事件作出反应。 子级 EventEmitter 属性是输出属性,通常带有 @Output 修饰符
示例:
祖父组件:
<parent (notifyGrandparent)="GrandparentHandle($event)">
</parent>
///ts
GrandparentHandle(event){
// do needed work
}
父级:
<child (handleNotif)="childEvent($event)">
</child>
@Output() notifyGrandparent= new EventEmitter();
childEvent(event) {
this.notifyGrandparent.emit('event')
}
孩子:
@Output() handleNotif = new EventEmitter
onNotify() {
this.handleNotif.emit('notify everyone')
}
您可以按照这个指南进行组件交互,使用这个完整的stackblitz示例。
此外,您还可以阅读这个有关组件交互的主题
以及这个使用@viewChildren
的示例,更加有趣...
@ViewChild注解允许从视图中获取一个组件,可以使用类型或者使用哈希标签
-- parent.component.ts
@Component()
export class ParentComponant {
@ViewChild("childComponent") child : ChildComponant;
@ViewChild(ChildComponant) ifOnlyOneChildOfThisType : ChildComponant;
// child are only accessible after view init
ngAfterViewInit() {
this.child.aPublicMethod();
this.ifOnlyOneChildOfThisType.aPublicMethod();
}
}
-- parent.component.html
<h1> Hello i'm the parent component </h1>
<child-component #childComponent></child-component>
如果你的子组件需要使用父组件的方法,你可以使用事件(Event)或直接通过输入(Input)来给予子组件该方法。
如果你传递一个方法,你必须将其声明为箭头函数,否则会得到错误的 "this" 对象。
-- parent.component.ts
@Component()
export class ParentComponant {
@ViewChild("childComponent") child : ChildComponant;
@ViewChild(ChildComponant) ifOnlyOneChildOfThisType : ChildComponant;
// child are only accessible after view init
ngAfterViewInit() {
this.child.aPublicMethod();
this.ifOnlyOneChildOfThisType.aPublicMethod();
}
methodToShare = () => {
// do something, and "this" is the ParentComponant
}
}
-- parent.component.html
<h1> Hello i'm the parent component </h1>
<child-component [inputMethod]="methodToShare" #childComponent></child-component>
ViewChild
属性,然后从祖父组件中调用this.parentRef.grandChildRef.method...
。 - undefined