为我的应用程序中的每个路由生成的内容需要被转换(注入)到父组件中.每条路线的内容使用ng-content定位特定注入点.
我可以使用< ng-container * ngComponentOutlet =“ResponsiveComponent;”>< / ng-container>换出父组件.问题是我的路由生成内容没有被注入到每个父组件中的目标ng-content位置.
这是交换父组件的代码. AppPageComponent扩展了ResponsiveComponent,它根据媒体查询监视设备宽度.
@Component({
selector: 'app-page',template: `
<ng-container *ngComponentOutlet="ResponsivePageComponent;"></ng-container>
`,styleUrls: [ './page.component.scss'],providers: []
})
export class AppPageComponent extends ResponsiveComponent implements OnInit,OnDestroy
{
ResponsivePageComponent;
constructor(
injector: Injector,zone: NgZone)
{
super(zone);
}
ngOnInit()
{
this.IsSmallEnvironmentStream
.subscribe
(
(isSmall: boolean) =>
{
if (isSmall)
{
this.ResponsivePageComponent= AppPageSmallComponent;
}
},(err) => { },() => {}
);
this.IsMediumEnvironmentStream
.subscribe
(
(isMedium: boolean) =>
{
if (isMedium)
{
this.ResponsivePageComponent = AppPageMediumComponent;
}
},() => {}
);
this.IsLargeEnvironmentStream
.subscribe
(
(isLarge: boolean) =>
{
if (isLarge)
{
this.ResponsivePageComponent = AppPageLargeComponent;
}
},() => {}
);
}
}
Angular的NgComponentOutlet文档显示,您可以将可插入节点的可选列表作为目标插入到内容(ng-content)占位符中.我按照Angular文档中的示例进行操作,并且能够将文本节点注入到我的父组件中的不同ng-content占位符中,并且它适用于我的小/中/大父组件.
如何从我的路线中获取内容以注入这些不同的占位符？看起来我真的很接近让这个工作.我可以将静态内容注入到掌上电脑中,但我无法弄清楚如何将路由生成的内容注入占位符.
更新 – 07/25/2017
我创建了这个plunker demonstrating this scenario(https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview).
在plunker中,页面包装器组件使用ngComponentOutlet根据设备宽度加载小/中/大组件. page-wrapper组件将静态内容注入每个小/中/大组件的占位符,而不是从第1页注入路由内容.
我的目标是有一个页面包装器组件来处理响应式需求,例如用于小型/中型/大型响应式设计的不同导航元件.
那么,如何将“静态”内容注入到动态加载的组件的ng-content占位符中,而路由生成的内容不会被注入到ng-content占位符中？
谢谢你的帮助.
解决方法
页面wrapper.component.html
<ng-container *ngComponentOutlet="ResponsiveComponent;
content: [[el1],[el2]]"></ng-container>
<div #el1>
<ng-content></ng-content>
</div>
<div #el2>
<ng-content select="[named-injection-point]"></ng-content>
</div>
2)您还可以在父组件中使用模板引用变量(或自定义指令),在PageWrapperComponent中使用@ContentChild来获取转义部分.
页面one.component.html
<page-wrapper>
<section #mainPoint>
<h2>Page One</h2>
</section>
<section #namedPoint>
<h3>Page One Content:</h3>
<p>Lorem ipsum dolor.</p>
</section>
</page-wrapper>
页面wrapper.component.ts
@ContentChild('mainPoint') mainPoint;
@ContentChild('namedPoint') namedPoint;
页面wrapper.component.html
<ng-container *ngComponentOutlet="ResponsiveComponent;
content: [[mainPoint.nativeElement],[namedPoint.nativeElement]]"></ng-container>
