javascript - 在 Angular 中，一个组件如何拥有多个 HTML 模板？

Question

我正在开发一个电子商务应用程序，一个主要特点是这个应用程序应该有多个主题。主题总数可以是 100 个甚至更多。然而，这些主题都有相同的数据(例如:所有主页都有相同的横幅图像、新产品、特色产品数据。)。

我知道我可以使用 ng-template 或 TemplateRef 来确定应该显示哪一段 HTML。但是因为我有超过 100 个主题，ng-template 或 TemplateRef 方法都会加载很多额外的文件。所以我认为我需要某种延迟加载，当一个组件加载数据然后延迟加载正确的 HTML 模板。那么我怎样才能完成这项工作呢？

Answer 1

看起来有可能，我们所有的路由都由延迟加载的模块处理。这是我们开箱即用的路由配置:

const routes: Routes = [
  { path: '', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

虽然模块 lazy 有这个路由配置:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
]

HomeComponent 取自模块 lazy 的声明。

然后定义另一个模块，例如调用 lazy-two 具有相同的路由配置，以及它自己的 HomeComponent。

最后，您可以使用以下代码在模块之间切换:

lazyLoad() {
  const routes: Routes = [
    { 
      path: '', 
      loadChildren: () => import('./lazy-two/lazy-two.module')
                            .then(m => m.LazyTwoModule)
    }
  ];

  this.router.resetConfig(routes);
  this.router.navigateByUrl('/home');
}

这将延迟加载模块 lazy-two 并刷新到 /home 的路由 - 您将看到显示的新模块的组件。

我无法创建 stackblitz，一些错误可能是由于延迟加载引起的。所以我在我的机器上本地运行它并将代码推送到 GitHub

编辑 我设法做了一个 StackBlitz