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');

修改

你说你需要将工具提示附加到身体上，这实际上并不是你如何以角度来做。大多数时候你都不会在飞行中创造东西。您可以做的是创建工具提示组件，然后将其应用于app.component.html并将app.component.ts选择器更改为body。这将导致AppComponent成为文档的body标记。然后我建议你为工具提示组件构建一个api服务，它可以用来触发工具提示的开启和关闭，以及在工具提示中设置其他东西，如文本。

由于我缺少工具提示实际执行的完整代码示例，因此我无法向您提供有关如何执行此操作的更清晰示例。但这应该可以让你了解如何达到你想要的效果。

在Angular 2中为模块添加样式

1 个答案: