品牌化 Angular 应用

Question

品牌化 Angular 应用

我正在开发一个需要为不同品牌构建和部署的应用程序。大多数差异仅在于 css，我认为我可以在运行时加载正确的样式。

但是，以下方法不起作用：

import { Component, Input } from '@angular/core';
import { brand } from '../../environments/environment';

@Component({
  selector: 'app-simple-form',
  template: `
             <div>
               {{message}}
             </div>
            `,
  styleUrls: [`./simple-form.component.${brand}.css`]
})
export class SimpleFormComponent implements OnInit {
  @Input() message;
}

Run Code Online (Sandbox Code Playgroud)

请注意我如何导入一个名为brand的字符串，然后使用它来加载正确的样式。但是，在形成styleUrls数组时，品牌不可访问。

但是，一旦组件被渲染，它就可以访问。

任何想法为什么这不起作用，以及是否有推荐的方法？

Answer 1

小智 0

您可以将您的品牌名称添加到某些根 html 元素，即<body>或<div id="root">

然后，您将能够根据品牌覆盖样式来设置应用程序的样式。

想象一下，您的品牌是microsoft。您可以将其添加到主体类中。

<body class="brand microsoft">

然后使用以下方法覆盖您想要的 Microsoft 任何样式

.brand.microsoft { ... }

归档时间：	8 年，5 月前
查看次数：	775 次
最近记录：	8 年，5 月前