Динамические таблицы стилей согласно url

Я работаю над порталом услуг, который позволяет клиентам входить в систему и отправлять массовые SMS / текстовые сообщения, электронную почту и push-сообщения. Мы запускаем один экземпляр клиентской части в продакшене. Каждый клиент достигает одного и того же портала по одному и тому же URL-адресу: http://www.messagingportal.com.

Однако каждый клиент добавляет к URL-адресу название своей компании, например: http://www.client1.messagingportal.com или http://www.client2.messagingportal.com.

На основе этого префикса в URL-адресе мы обслуживаем различные таблицы стилей, которые содержат внешний вид, соответствующий бренду этого клиента. На данный момент я делаю это с помощью ванильного JavaScript, который прикреплен к index.html в моем приложении angular. Очевидно, что это ужасный способ сделать это. См. Ниже код:

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

1
0
25
2

Ответы 2

По сути, это тематика, основанная на клиенте. Обычный способ сделать это - добавить класс к тегу html следующим образом:

Вы должны добавить этот класс с помощью JavaScript на основе поддомена. Затем вы просто добавляете ВСЕ таблицы стилей, и стили в них выглядят следующим образом:

.logo {
  display:none;
}

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

HTML:

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

Возможно, вы можете изменить 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>

Спасибо, Джером, к сожалению, он должен использовать указанную мной конфигурацию URL. Но проголосую за усилия :)

Chris 10.09.2018 12:38

Другие вопросы по теме