使用 ng-content 的 Angular pass 模板引用

Question

我想将 ng-template 作为 ng-content 嵌套在 child 中传递

应用组件.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
  }

堆栈 Blitz :https://stackblitz.com/edit/angular-cuipde

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

Answer 1

如果您要将数据向上或向下传递到不止 1 个级别，我建议您查看服务并使用 subject 或 behaviorSubject 在多个组件之间传递数据。