8

我有三个嵌套组件，称为和level0，定义如下：level1level2

@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？

这是plnkr

4

2 回答 2

7

如果您在嵌套组件的每个级别都使用 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);
  }
}
于 2017-10-05T15:17:18.933 回答
3

我认为目前这是不可能的。

ViewQueryMetadata API 文档说明如下：

支持与 QueryMetadata 相同的查询参数，除了 descendants。

QueryMetadata API 文档有这个后代示例：

使用 descendants 参数配置查询是查找查询元素的直接子代还是查找查询元素的所有后代。默认设置为 false。

...此处未显示代码...

查询项目时，第一个容器默认只能看到 a 和 b，但Query(TextDirective, {descendants: true})它也会看到 c。

于 2016-04-15T19:29:56.127 回答