根据 URL 的动态样式表答案

【问题标题】：Dynamic stylesheets according to URL根据 URL 的动态样式表
【发布时间】：2018-09-10 15:55:37
【问题描述】：

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

但是，每个客户都会在 URL 前加上他们的公司名称，即：http://www.client1.messagingportal.com 或 http://www.client2.messagingportal.com。

根据 URL 中的这个前缀，我们提供不同的样式表，其中包含与该客户品牌相关的外观和感觉。目前，我使用一些附加到我的 Angular 应用程序中的 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 执行此操作？

【问题讨论】：

标签： angular

【解决方案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>

【讨论】：

感谢 Jerome，不幸的是它必须使用我提到的 URL 配置。不过会为努力投票:)

【解决方案2】：

这本质上是基于客户端的主题。执行此操作的正常方法是向 html 标记添加一个类，如下所示：

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

.logo {
  display:none;
}

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

HTML：

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

【讨论】：