使用ng内容的角度过程模板引用

Question

我想将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>

---

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

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

我预计TemplateRef将向下传递两个级别：应用程序组件>父级>子级

Answer 1

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