Angular 2 如何分别加载 2 App 根组件答案

【问题标题】：Angular 2 How to load 2 App root component separatelyAngular 2 如何分别加载 2 App 根组件
【发布时间】：2020-09-07 01:09:21
【问题描述】：

是否可以加载 2 个不同的根组件（不是在页面中并排）。找到了一个plunker example，唯一的区别是这两个根组件是在一个页面中加载的。

<body>
  <my-app>Loading...</my-app>
  <my-sec>Loading...</my-sec>
</body>

我想要实现的是，每个组件都有自己的布局，而不是与 app.component 共享。

示例：app.component 将具有普通用户的视图模板，而 admin.component 将具有仪表板模板。

这可以实现吗？或者我必须为此创建 2 个单独的项目？（一个用于普通视图，另一个用于仪表板视图）

【问题讨论】：

我不明白你为什么要这个。你不能添加一个路由器插座并根据 url 或 myApp 或 secApp 加载
@MarcelHoekstra 然后我的其他组件的路线将不起作用，我将不得不使用子路线。如果只是 /contact-us，/home/contact-us 看起来就不那么好了。 app.component 视图应该是“母版页”不是吗？或者我误解了这个概念。明天我会尝试扩展 router-outlet 指令，并延迟加载模块，看看效果如何。
母版页是index.html吧？如果您想拥有完全不同的外观，而不是使用 index.html 中引用的样式表，我想您必须创建一个新应用程序。如果没有，请告诉我你是如何实现它的:-)。我实际上遇到了同样的问题，并通过在我的管理页面中添加了一个 CSS 来解决它，该 CSS 覆盖了一些样式，使看起来更像仪表板。
@MarcelHoekstra 我在我的 github 上发布了一个示例来回答这个问题。如果您愿意，请随时查看。
感谢您的示例！

标签： angular

【解决方案1】：

为此，更好的方法可能是使用 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 声明中为你的模块传递你想要的确切布局数据组件

【讨论】：

【解决方案2】：

虽然我想不出正确的答案，但这是我玩了几天后想出的。这对我的需求来说已经足够好。

这是我在github 上所做的示例的链接。

基本上，我决定放弃分别加载 2 个根组件并动态加载组件的想法。

如果有任何可以改进的地方，请告诉我。

【讨论】：