Angular 角度8:如何使用多内容投影/多转置插槽两次? 我有一个角度8.2项目,有两种不同的显示模式(横向|纵向) 每个页面的顶部和底部都有一个工具栏,围绕着主要内容 菜单以及主内容都是特定于模块的,因此我使用的是插槽。换句话说:五个不同的可能父组件中有一个使用此组件,并使用提供主内容和(单独不同的)菜单 //第一 //第二 //肖像模式 ... 与上面非常相似,也有2个菜单,1个内容。。。 问题:如何使用插槽两次?**如果我使用例如。。。
…一个Angular 角度8:如何使用多内容投影/多转置插槽两次? 我有一个角度8.2项目,有两种不同的显示模式(横向|纵向) 每个页面的顶部和底部都有一个工具栏,围绕着主要内容 菜单以及主内容都是特定于模块的,因此我使用的是插槽。换句话说:五个不同的可能父组件中有一个使用此组件,并使用提供主内容和(单独不同的)菜单 //第一 //第二 //肖像模式 ... 与上面非常相似,也有2个菜单,1个内容。。。 问题:如何使用插槽两次?**如果我使用例如。。。,angular,angular-content-projection,Angular,Angular Content Projection,…一个console.dir()向我显示了一个有效的ElementRef,但我无法在.html模板中输出它,即可能会有用 我的理解是,ng content并不创建内容,它只是将内容从一个部分移动到另一个部分 我认为解决您问题的方法是使用ng模板。例如: 投影组件 let实例=0; @组成部分({ 选择器:“应用程序已投影”, 模板:`projected instance nr:{{instanceId}}` }) 导出类ProjectedComponent实现OnInit{ instanceId
console.dir()
向我显示了一个有效的ElementRef,但我无法在.html模板中输出它,即
可能会有用
我的理解是,ng content
并不创建内容,它只是将内容从一个部分移动到另一个部分
我认为解决您问题的方法是使用ng模板
。例如:
投影组件
let实例=0;
@组成部分({
选择器:“应用程序已投影”,
模板:`projected instance nr:{{instanceId}}`
})
导出类ProjectedComponent实现OnInit{
instanceId:数字;
构造函数(){}
恩戈尼尼特(){
this.instanceId=++实例;
}
}
parent.component.ts
@组件({
选择器:“应用程序父级”,
模板:`
父组件
使用内容#1
使用内容#2
`,
})
导出类ParentComponent实现OnInit{
@ContentChild('content',{read:TemplateRef})content:TemplateRef“将ng模板
做得更高一级”-谢谢,这确实出色地解决了它!Thanxs堆!
A <ng-container *ngTemplateOutlet="menu"></ng-container> A
B <ng-container *ngTemplateOutlet="menu"></ng-container> B
@ViewChild('menu', {static: true}) menuA: TemplateRef<any>;