Question

我只需要在非SPA传统Web应用程序的某些页面中使用Angular（在我的例子中，它是Flask python框架+ Jinja2用于模板）。

用户转到/foo，服务器返回包含 <foo-component></foo-component>的html，Angular处理该组件。
当用户转到/bar服务器时，返回仅包含<bar-component></bar-component>的html。等等。

我最初的想法是，我只列出我所有的＆＃34;页面组件＆＃34;作为app.module.ts中的根组件（因为它们是根组件），但事实证明，在这种情况下，angular要求所有根组件一次在html中声明。

如何设计引导过程以使描述的用例成为可能？

一种方法是渲染单个根组件，让它根据url决定渲染哪个子组件。类似于（app.component.html）：

<main [ngSwitch]="currentPath">
  <foo-component *ngSwitchCase="/foo"></foo-component>
  <bar-component *ngSwitchCase="/bar"></bar-component>
</main>

所有与Angular相关的页面都会返回只有<main-app></main-app>的html。

然而，与简单地在服务器模板中声明组件相比，此解决方案感觉很麻烦。