是否可以加载 2 个不同的根组件（不是在页面中并排）。
找一个笨蛋的例子 http://plnkr.co/edit/XSJ8ac，唯一的区别是两个根组件都加载在单个页面中。
<body>
<my-app>Loading...</my-app>
<my-sec>Loading...</my-sec>
</body>
我想要实现的是，每个组件都有自己的布局，并且不与 app.component 共享。
示例：app.component 将具有普通用户的视图模板，而 admin.component 将具有仪表板模板。
这是可以实现的吗？或者我必须为此创建 2 个单独的项目？（一个用于普通视图，另一个用于仪表板视图）
为此，更好的方法可能是使用 NgComponentOutlet 指令。在app.component.html中只需要使用：
<ng-container *ngComponentOutlet="appLayoutComponent"></ng-container>
然后在 app.component.ts 中，您需要提供要在运行时渲染的组件：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public appLayoutComponent: BaseLayoutComponent;
如果您希望所有不同的布局组件都具有通用功能，您也许可以巧妙地继承一些基本布局组件。
作为使用示例，您可以在 ngOnInit() 方法中订阅路由器事件：
ngOnInit() {
this.router.events.subscribe((data) => {
if (data instanceof RoutesRecognized) {
this.appLayoutComponent = data.state?.root?.firstChild?.data?.layout;
}
});
}
最后在 app-routing.module.ts 声明中传递您想要为模块提供的确切布局数据组件
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
