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

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

我最初的想法是，我将在 app.module.ts 中将所有"page components"列为根组件（因为它们是根组件），但事实证明，在这种情况下，angular要求所有根组件一次在html中声明 .

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

一种方法是渲染单个根组件，并让它根据url决定渲染哪个子组件 . 像（ app.component.html ）这样的东西：

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

并且所有Angular相关页面都将返回html，只有 <main-app></main-app> .

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

angular