角4 ngComponentOutlet加载动态组件，但没有呈现路由内容。
我试图加载不同的“父”组件，并通过在每个父组件中以ng-content为目标将路由内容注入到这些不同的父组件中。本质上，每个父组件都根据设备宽度(小/可移动、中型/平板和大型/桌面)处理导航和其他样板组件。
为我的应用程序中的每个路由生成的内容需要被屏蔽(注入)到父组件。每个路由的内容使用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;
}
},
(err) => { },
() => {}
);
this.IsLargeEnvironmentStream
.subscribe
(
(isLarge: boolean) =>
{
if (isLarge)
{
this.ResponsivePageComponent = AppPageLargeComponent;
}
},
(err) => { },
() => {}
);
}
}NgComponentOutlet的文档显示，您可以将可投射节点的可选列表定向到内容(ng- content )占位符中。我遵循了角文档中的示例，能够将文本节点插入到父组件中的不同ng-content占位符中，并且它适用于我的小型/中型/大型父组件。
如何从我的路径中获取内容以插入到这些不同的占位符中？看来我已经快把这事办好了。从本质上说，我可以将静态内容注入到面板中，但我不知道如何将路由生成的内容注入占位符。
更新- 07/25/2017
我创建了这个演示此场景的柱塞 (https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview)。
在柱塞中，page-wrapper组件根据设备宽度使用ngComponentOutlet加载小型/中型/大型组件。页面包装组件是将静态内容注入到每个小型/中型/大型组件中的占位符中，而不是从第1页注入路由内容。
我的目标是有一个页面包装组件来处理响应性需求，比如用于小/中/大型响应设计的不同导航元素。
那么，如何将“静态”内容注入动态加载组件的ng-content占位符，而路由生成的内容却没有注入到ng-content占位符中？
谢谢你的帮助。
回答 2
Stack Overflow用户
发布于 2017-07-25 13:39:23
1)您可以在您的ng-content中定义PageWrapperComponent位置，并将它们转换为动态组件
page-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)还可以在父组件中使用模板引用变量(或自定义指令)，在@ContentChild中使用PageWrapperComponent获取转换部分。
page-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>page-wrapper.component.ts
@ContentChild('mainPoint') mainPoint;
@ContentChild('namedPoint') namedPoint;page-wrapper.component.html
<ng-container *ngComponentOutlet="ResponsiveComponent;
content: [[mainPoint.nativeElement],[namedPoint.nativeElement]]"></ng-container>Stack Overflow用户
发布于 2017-07-25 13:36:47
这就是你所期待的吗？我只测试了中型零件BTW..。
https://plnkr.co/edit/JgCQb4JVSHnHCueamerV?p=preview
我认为这是因为您试图在一个组件中使用ng内容，而该组件不是直接从具有要注入的内容的组件调用的。我所做的就是在PageWrapperComponent上添加一个ng内容，并使用它自己的选择器，然后将它传递给下一个组件，以及一个期望的选择器。
PageWrapperComponent...
<ng-content select="[injected-content]" named-injection-point></ng-content>然后，在PageOneComponent中使用包装器所期望的新选择器。
<section injected-content>
<h3>Page One Content:</h3>
<p>Lorem ipsum ...</p>
</section> 现在，当我单击页面1链接时，我可以看到Jimmy和Fred下面的第一页内容。
https://stackoverflow.com/questions/45261741
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号