以编程方式将投影内容传递给儿童？ （否则将呈现为 <ng-content> ）

Posted 2023-03-13

【中文标题】以编程方式将投影内容传递给儿童？ （否则将呈现为 <ng-content> ）

【英文标题】：Programmatically pass on projected content to children? (that would be rendered into a <ng-content> otherwise)

【发布时间】：2020-03-04 00:54:43

【问题描述】：

说，我有一个 <hook> 组件，它以编程方式创建一个子组件，我如何将内容（Angular 将呈现为钩子模板中的 <ng-content></ng-content>）作为 ng-content 传递给该子组件（这可能或者可能不决定显示它）？

<hook ...>
   Dynamic content should be passed to hook's programmatically created child
</hook>

我发现了一个关于内容投影的very helpful explanation，它展示了如何将投影内容传递给以编程方式创建的组件，这是我的问题的一半。对我来说缺少的链接仍然是：如何访问传递给hook 的内容以传递它。

【参考方案1】：

如果我完全理解了这个问题，这可能是一个解决方案：

app.component.ts

@Component(
  selector: 'my-app',
  template: `
    <h1>App comp</h1>

    <hook>
      awesome content here
    </hook>
  `
)
export class AppComponent   

hook.component.ts

@Component(
  selector: 'hook',
  template: `
    <h2>Hook comp</h2>

  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>

  <ng-container #vc></ng-container>
  `
)
export class HookComp 
  @ViewChild('content',  static: true, read: TemplateRef )
  contentTpl: TemplateRef<any>;
  @ViewChild('vc',  static: true, read: ViewContainerRef )
  vc: ViewContainerRef;

  constructor (
    private cfr: ComponentFactoryResolver,
    private injector: Injector,
  )  

  ngAfterViewInit () 
    this.createChildComp();
  

  private createChildComp () 
    const compFactory = this.cfr.resolveComponentFactory(HookChildComp);
    const componentRef = this.vc.createComponent(compFactory);

    componentRef.instance.contentTpl = this.contentTpl;

    componentRef.changeDetectorRef.detectChanges();
  

hook-child.component.ts

@Component(
  selector: 'hook-child',
  template: `
    <h3>Hook child comp</h3>

    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
  `
)
export class HookChildComp 
  contentTpl: TemplateRef<any>;

如您所见，我可以通过将hook 包装成ng-template 来获取ng-content。然后，我可以简单地查询该模板并将其传递给以编程方式创建的孩子。