时间戳

首页 > 解决方案 > 在 Angular 中，一个组件如何拥有多个 HTML 模板？

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

问题描述

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

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

理念结构

标签： javascriptnode.jsangular

解决方案

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

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

虽然模块lazy具有此路由配置：

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

WhileHomeComponent取自 module 的声明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- 您将看到显示的新模块的组件。

我无法创建堆栈闪电战，可能由于延迟加载而发生了一些错误。所以我在我的机器上本地运行它并将代码推送到GitHub

编辑我设法制作了StackBlitz

推荐阅读