angular - 使用 ng-content 的角度传递模板参考

Question

我想通过ng-template嵌套ng-content在孩子里面

应用组件.html

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

---

父组件.html

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

---

父组件.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>) { }

}

---

子组件.ts

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

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

堆栈闪电战： https ://stackblitz.com/edit/angular-cuipde

我希望TemplateRef向下传递两个级别：app-component > parent > child

Answer 1

如果您要将数据向上或向下传递超过 1 级，我建议您查看服务并使用主题或行为主题在多个组件之间传递数据。