在 Angular 2 中向模块添加样式

Question

我有一个指令和模块可以在其他模块中导入指令。但是如何将 *.scss 文件添加到此模块中以仅在需要模块时加载它。

示例：

import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {TooltipDirective} from "./tooltip.directive";
//import "tooltip.scss" ???
@NgModule({
              imports     : [
                  CommonModule
              ],
              declarations: [TooltipDirective],
              exports     : [TooltipDirective]
          })
export class TooltipModule {
}

Answer 1

您不能将样式绑定到指令，因为它是无模板的。如果您希望您的样式仅应用于您正在创建的元素，您最好的选择是在创建的元素上使用内联样式。

还有，你说你用的是document.createElement，请不要。

改为使用 renderer 来创建和设置样式：

import {Renderer} from '@angular/core';

constructor(private renderer: Renderer) {}

const element = this.renderer.createElement('div');

// You might have to pass element.nativeElement here, can't remember
this.renderer.setElementStyle(element, 'background-color', 'red');

编辑：

您说您需要将工具提示附加到正文，但您在 angular 中并不是这样做的。大多数时候，您不会即时创建内容。您可以做的是创建工具提示组件，然后将其应用于 app.component.html 并将 app.component.ts 选择器更改为 body。这将导致 AppComponent 成为文档的 body 标签。然后，我建议您为工具提示组件构建一个 api 服务，该服务可用于触发工具提示的开启和关闭以及设置其他内容，例如工具提示中的文本。

由于我缺少工具提示实际作用的完整代码示例，因此我无法为您提供任何更清晰的示例来说明如何执行此操作。但这应该让您了解如何实现您想要的。

在 Angular 2 中向模块添加样式

Add styles to module in Angular 2

angular2-directives

angular