角访问内部组件

Question

比方说，我们有一个叫做TopComponent组件与这样的一个模板：

<ng-template #top> 
    <inner-selector #inner></inner-selector> 
</ng-template> 

它的代码很简单：

//... imports ... 

@Component({ 
    // selector, styles etc 
}) 
export class TopComponent implements AfterViewInit { 

    @ViewChild('top') topComp : NgbModal; 
    // NgbModal is a type provided by some 3rd-party library 
    // I can't modify it 

    ngAfterViewInit() { 
    // let's access the #inner component from here 
    } 
} 

我可以访问#top组件使用此代码：

@ViewChild('top') topComponent: TopComponent; 

我该如何访问#inner组件来自同一类？

我试过使用@ContentChild('inner')，但仍然得到undefined。

PS。我知道我可以创建另一个组件，使用它而不是<ng-template>，并从中访问所有必需的孩子。但是这可以以某种方式避免吗？

Answer 1

使用后代@ViewChild（'inner'，{descendants：true}）inner：InnerSelector;

这里是填写代码：https://plnkr.co/edit/MtVhHuAtPXZzC7GLOidF?p=preview

@Component({ 
    selector: 'inner-selector', 
    template:'inner-selector here' 
    }) 
    export class InnerSelector { 
    myVar = 0; 
    } 

    @Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <ng-template #top> 
      <inner-selector #inner></inner-selector> 
     </ng-template> 

     <ng-container [ngTemplateOutlet]="top"></ng-container> 
     </div> 
    `, 
    }) 
    export class App { 
    @ViewChild('inner', {descendants: true}) inner: InnerSelector; 
    constructor() { 
     this.name = `Angular! v${VERSION.full}` 
    } 
    ngAfterViewInit() { 
     console.log(this.inner); 
    } 
    }