Question

我正在使用一个服务门户，该门户允许客户端登录并发送大量SMS /文本消息，电子邮件和推送消息。我们在生产中运行一个前端实例。每个客户端都通过相同的URL http://www.messagingportal.com到达相同的门户。

但是，每个客户端都使用自己的公司名称（即http://www.client1.messagingportal.com或http://www.client2.messagingportal.com）作为URL的前缀。

基于URL中的该前缀，我们提供不同的样式表，其中包含与该客户品牌相关的外观。目前，我使用一些附加在我的角度应用程序中的index.html上的原始JavaScript来执行此操作。这显然是一种可怕的做法。参见下面的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GVI Portal</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
<script>
  if((location.hostname.toLowerCase().indexOf("client1")) > -1) {
    document.write("<link href=\"\\assets\\css\\skins\\client1.css\" rel=\"stylesheet\">");
  }
</script>
</html>

因此，如果客户端导航到其URL http://www.client1.messagingportal.com，则样式表client1.css将附加到DOM。它包含覆盖当前样式表的CSS。颜色，字体，徽标等...

使用Angular在我的应用程序中有更好的方法吗？

Answer 1

也许您可以更改客户的URL以使用某些标准模式，例如http://www.messagingportal.com/client1

然后，您将client定义为路由定义中的动态参数，例如：

{ path: '/:client', component: ... }

例如，使用ngSwitch在组件和模板中使用此变量

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>GVI Portal</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <app-root></app-root>
</body>
<script [ngSwitch]="client">
 <link href="\assets\css\skins\client1.css\" rel=\"stylesheet\" *ngSwitchCase="client == client1">;
</script>
</html>

Answer 2

这本质上是基于客户端的主题。正常的方法是像这样向html标签添加一个类：

您将使用基于子域的JavaScript添加此类。然后，您只需添加所有样式表，它们中的样式将如下所示：

.logo {
  display:none;
}

.client1-theme .logo.client1 {
  display:block;
}

HTML：

<img src="...." class="logo client1"> 
<img src="...." class="logo client2">

根据URL的动态样式表

2 个答案: