Программно передать проектируемый контент детям? (это будет сделано вв противном случае) - PullRequest
Новая
       34

Программно передать проектируемый контент детям? (это будет сделано вв противном случае)

3 голосов
/ 07 ноября 2019

Скажем, у меня есть компонент <hook>, который создает дочерний программно, как я мог бы передать контент (который Angular будет отображать в <ng-content></ng-content> в шаблоне хука) вместо этого как ng-контент этому дочернему компоненту (который можетили, возможно, не решите отобразить его)? 

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

Я нашел очень полезное объяснение о проекции контента, которое показывает, как передавать проецируемый контент в программно созданный компонент, который является одним изполовина моей проблемыПропавшая ссылка для меня все еще: Как получить доступ к содержимому, переданному hook, чтобы передать его.

1 Ответ

1 голос
/ 07 ноября 2019

Если я полностью понимаю проблему, здесь может быть решение:

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-content, превратив его в ng-template. Затем я могу просто запросить этот шаблон и передать его программно созданному дочернему элементу.

...