3

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

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

我找到了一个关于内容投影的非常有用的解释，它展示了如何将投影内容传递给以编程方式创建的组件，这是我的问题的一半。对我来说缺少的链接仍然是：如何访问传递给的内容hook以传递它。

4

1 回答 1

1

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

app.component.ts

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

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

钩子组件.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();
  }
}

钩子.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-content包装成ng-template. 然后，我可以简单地查询该模板并将其传递给以编程方式创建的孩子。

于 2019-11-07T14:29:49.527 回答