Question

我将Angular 6项目分为多个模块。这些模块引用包含所有样式表（SASS）作为值的ui模块，例如

$primary-text-color: #dde7ff !default;

其原因是模块的可重用性。构建这些模块之一后，样式表已经成为* .js文件的一部分。一切都是CSS，并且scss值不再存在。但是，这种方法不允许消费者主题化或更改值，例如之后，模块内部组件的颜色或字体。

我的目标是允许消费者：

创建一个新的angular-cli项目
定义自己的全局样式变量，例如$primary-text-color: #dddddd !default;，因此覆盖所提到的变量
引用现有模块
构建应用程序。

预期结果将是具有消费者新风格的外观/主题的应用程序。使用这种方法，不会迫使消费者手动设置每个组件的样式。

要实现这一目标，可以：

创建angular-cli库而无需编译ts文件和呈现样式表？这只是原始文件的捆绑包，但在库中。在这种情况下，对变量的引用仍然存在，并且可能会被覆盖。
之后是否使用全局样式表来样式化模块中的组件？

Answer 1

如果不构建代码，就无法真正捆绑代码。

但是，也许您可以尝试解决此问题。您可以使用主题选项创建InjectionToken。

说：

export interface Theming{
  color: string;
}

const THEMING_CONFIG : InjectionToken<Theming> = new InjectionToken<Theming>('Theming Config');

现在，在您的lib模块中：

@NgModule()
....
export class UIModule{
  static init(config: Theming): ModuleWithProviders {
    return { 
       ngModule: UIModule,
       providers: [{provide: THEMING_CONFIG, useValue: config}]
    }
  }

}

现在，在您的lib中的每个组件中，您都可以插入InjectionToken并将其用于设置元素的样式（ngStyle？）

最终用户使用lib的方式将是：

@NgModule
...
export class AppModule {
   imports: [..., UIModule.init(USER_COLOR_HERE)]
}

无需编译即可捆绑Angular项目

1 个答案: