Ссылка на шаблон углового прохода с использованием ng-контента - PullRequest
Новая
       87

Ссылка на шаблон углового прохода с использованием ng-контента

0 голосов
/ 25 октября 2019

Я хочу передать ng-template как ng-content вложенный в дочерний элемент

app-component.html 

<app-parent>
  <ng-template appTemplateRetrieval>
    <div>this should be passed to grand child</div>
  </ng-template>
</app-parent>

parent-component.html 

<app-child>
  {{directivesTemplate}}
</app-child>

parent-component.ts 

 @ContentChild(TemplateRetrievalDirective, {static: false}) tplRetDir: TemplateRetrievalDirective;

  get directivesTemplate(): TemplateRef<any> {
    return this.tplRetDir && this.tplRetDir.template;
  }

директива 

export class TemplateRetrievalDirective {

  constructor(public template: TemplateRef<any>) { }

}

child-component.ts 

@ContentChild(TemplateRef, {static: true}) contentTpl: TemplateRef<any>;

  ngAfterContentInit() {
    console.log(this.contentTpl) // logs to console: undefined
  }

stackblitz:https://stackblitz.com/edit/angular-cuipde

Я ожидаю, что TemplateRef будет пройдено на два уровня вниз: app-component> parent> child

1 Ответ

0 голосов
/ 25 октября 2019

Если вы собираетесь передавать данные более чем на 1 уровень вверх или вниз, я предлагаю вам взглянуть на сервисы и использовать субъект или объект поведения для передачи данных между несколькими компонентами.

...