我有三个嵌套组件,名为level0
,level1
和level2
,定义如下:
@Component({
selector: 'level2',
template: `<div>I am level 2</div>`,
})
export class Level2 {
getName(){
return "my name is 'TWO'";
}
}
@Component({
selector: 'level1',
template: `<div>I am level 1<level2></level2></div>`,
directives: [Level2]
})
export class Level1 {
getName(){
return "my name is 'ONE'";
}
}
@Component({
selector: 'level0',
template: `<div>I am level 0<level1></level1></div>`,
directives: [Level1,Level2]
})
export class App {
@ViewChild(Level1) level1:Level1;
@ViewChild(Level2) level2:Level2;
ngAfterViewInit() {
if(this.level1){var name1 = this.level1.getName();}
if(this.level2){var name2 = this.level2.getName();}
console.log("name1",name1);
console.log("name2",name2);
}
}
在控制台中,我希望看到:
name1 my name is 'ONE'
name2 my name is 'TWO'
但我明白了:
name1 my name is 'ONE'
name2 undefined
我错过了什么?为什么Level0
组件无法通过Level2
访问@ViewChild
?
有没有办法访问Level2
中的Level0
方法?
答案 0 :(得分:5)
如果您在嵌套组件的每个级别使用ViewChild,就可以实现这一点:
// Level 2
@Component({
selector: 'level2',
template: `<div>I am level 2</div>`,
})
export class Level2 {
getName(){
return "my name is 'TWO'";
}
}
// Level 1
@Component({
selector: 'level1',
template: `<div>I am level 1<level2></level2></div>`,
directives: [Level2]
})
export class Level1 {
@ViewChild(Level2) level2:Level2;
getName(){
return "my name is 'ONE'";
}
// You need to add additional function that would be called from level 1
calledFromLevel1() {
return this.level2.getName();
}
}
// Level 0
@Component({
selector: 'level0',
template: `<div>I am level 0<level1></level1></div>`,
directives: [Level1,Level2]
})
export class App {
@ViewChild(Level1) level1:Level1;
ngAfterViewInit() {
if(this.level1) {
var name1 = this.level1.getName();
var name2 = this.level1.calledFromLevel1();
}
console.log("name1",name1);
console.log("name2",name2);
}
}
答案 1 :(得分:2)
我认为目前无法做到这一点。
ViewQueryMetadata API doc说明如下:
支持与QueryMetadata相同的查询参数,除了后代。
QueryMetadata API doc有这个后代的例子:
使用descendants参数配置查询是查找直接子项还是查询元素的所有后代。默认设置为false。
...此处未显示代码...
查询商品时,第一个容器默认只会看到a和b,但是
Query(TextDirective, {descendants: true})
它也会看到c。