带有ng-template的角动态组件

问题描述

带有ng-template

的组件

@Component({
  template: `
    <div>Hello Component is here!</div>

    <ng-template #cmp_anchor>
      <div>Template content</div>
    </ng-template>
  `,})
export class HelloComponent {}

使用 ngTemplateOutlet 渲染时，无法访问ng-template

@Component({
  selector: 'my-app',template: `
    <ng-container *ngComponentOutlet="helloComponent"></ng-container>

    <ng-container
      [ngTemplateOutlet]="cmpTemplateRef">
    </ng-container>
  `
})
export class AppComponent  {
  public helloComponent = HelloComponent;

  @ContentChild('cmp_anchor',{read: TemplateRef}) cmpTemplateRef: TemplateRef<any>;
}

以下示例代码：https://stackblitz.com/edit/angular-ng-component-outlet-with-ng-template?embed=1&file=src/app/app.component.ts

解决方法

那确实是不可能的。组件中的@ContentChild会查看组件标签中的内容。例如：<my-cmp><ng-template #cmp_anchor></ng-template></my-cmp>，如果您在@ContentChild类上设置了MyComponent，将返回一个模板。

没有直接方法可以从使用ng-template投射的组件访问ngComponentOutlet。您甚至无法访问HelloComponent实例。

您可以对_componentRef实例的ngComponentOutlet进行私有访问，但这有点麻烦。我建议您回到制图板上，或用您要尝试解决的更大问题来改写您的问题。无论如何，要使其运行，您可以（但不应）执行以下操作：

@Component({
  template: `
    <div>Hello Component is here!</div>

    <ng-template #cmp_anchor>
      <div>Template content</div>
    </ng-template>
  `,})
export class HelloComponent  {
  @ViewChild('cmp_anchor',{read: TemplateRef})
  cmpTemplateRef: TemplateRef<any>;
}

@Component({
  selector: 'my-app',template: `
    <ng-container *ngComponentOutlet="helloComponent"></ng-container>

    <ng-container
      [ngTemplateOutlet]="$any(ng)?._componentRef.instance.cmpTemplateRef">
    </ng-container>
  `
})
export class AppComponent  {
  public helloComponent = HelloComponent;

  @ViewChild(NgComponentOutlet) ng: NgComponentOutlet;
}

working example

如果您仍然需要这样做，可以始终根据ngComponentOutlet指令编写自己的结构指令。从那里，您可以暴露出传递​​给出口指令的所有东西