Angular 根据URL的动态样式表_Angular

Angular 根据URL的动态样式表

angular

Angular 根据URL的动态样式表,angular,Angular,我正在开发一个服务门户，它允许客户登录并发送大量短信、电子邮件和推送消息。我们在生产中运行前端的一个实例。每个客户端通过相同的URL访问相同的门户：但是，每个客户机在URL前面加上他们的公司名称，即：或基于URL中的前缀，我们提供不同的样式表，其中包含与该客户品牌相关的外观和感觉。目前，我使用一些普通的JavaScript来实现这一点，这些JavaScript附加到我的angular应用程序中的index.html。这显然是一种可怕的做法。见以下代码： <!doctype html&g

我正在开发一个服务门户，它允许客户登录并发送大量短信、电子邮件和推送消息。我们在生产中运行前端的一个实例。每个客户端通过相同的URL访问相同的门户：

但是，每个客户机在URL前面加上他们的公司名称，即：或

基于URL中的前缀，我们提供不同的样式表，其中包含与该客户品牌相关的外观和感觉。目前，我使用一些普通的JavaScript来实现这一点，这些JavaScript附加到我的angular应用程序中的index.html。这显然是一种可怕的做法。见以下代码：

<!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>


GVI门户
样式表client1.css追加到DOM中。它包含覆盖当前样式表的CSS。颜色、字体、徽标等
在我的应用程序中，是否有更好的方法使用Angular进行此操作？
这基本上是基于客户端的主题化。通常的做法是向html标记添加一个类，如下所示：

您可以使用基于子域的JavaScript添加此类。然后添加所有样式表，其中的样式如下所示：
.logo {
  display:none;
}

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

HTML:
也许您可以更改您的客户端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>


GVI门户
;
谢谢Jerome，不幸的是它必须使用我提到的URL配置。但我会投票支持这项努力：）
<!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>