时间戳

首页 > 解决方案 > 来自客户特定模块的 Angular 8 覆盖模板

html - 来自客户特定模块的 Angular 8 覆盖模板

问题描述

我正在构建一个系统，其中核心应该能够处理不同的客户，并且我希望能够延迟加载覆盖不同组件模板的“客户特定”模块，假设我有一个 ShowBlogComponent 并且它有

<ng-container *ngTemplateOutlet="showblog"></ng-container>

<ng-template #showblog>
    <div>SHOW MY BLOG FROM CORE</div>
</ng-template>

然后我想要一个模块 MyCustomerModule ，我们在其中加载一个新的 html 文件：

<ng-template #showblog>
    <div>SHOW MY BLOG FROM MyCustomer</div>
</ng-template>

这会覆盖该特定客户的 HTML 模板。

我怎样才能做到这一点？

我将如何在 angularJs 中做到这一点：

templateUrl: getBlogTemplate()


function getBlogTemplate() {
   if(customer) 
      return "customerBlogTemplate.html";
   else 
      return "baseBlogTemplate.html";
}

标签： htmlangulartypescriptangular8

解决方案

您可以为 ShowBlogComponent 创建基类 - 例如 showBlogComponentBase.ts。如果您使用惰性路由到不同的模块 - 每个模块路由都可以引导您到 showBlogComponentBase 的特定后代。

在每个组件文件中，您可以扩展基类并使用不同的本地 templateUrl html，但其背后具有相同的逻辑。

所以你可以拥有：

带有导出（或延迟路由）的common.module.ts common-show-blog.component.ts扩展了 showBlogComponentBase.ts

和

< your-custom-module >.module.ts 与导出（或延迟路由）< your-custom-module >-show-blog.component.ts扩展showBlogComponentBase.ts

推荐阅读