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);
    }
  }

Ang-Access的ng-template内部组件

1 个答案: