角度6全局css的替代方式

我在我的一个组件中使用了Handsontable，它迫使我在angular.json文件中全局地包含它的css

"styles": [
         "./src/styles.scss",
          "./node_modules/handsontable/dist/handsontable.full.css"
       ],

它会影响整个应用程序中的日历组件。 如何仅为该可手持组件包含此css，并为所有其他组件禁用它

在可手持组件scss文件中写入导入无效

---

提前感谢。

此操作如下所示。注意

封装：查看封装。无

。这将禁用默认的

模拟DOM

，以便此组件的样式也适用于子组件。另一方面，默认情况下

仿真DOM

，保护每个组件的作用域（这就是为什么它在您的案例中不起作用）

另请参阅

然而，这实际上并不能解决您的问题。因为，根据文件：

[视图封装]无表示Angular不进行视图封装。Angular将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中基本相同

实际上，这意味着输出将以任何方式进入全球范围

因此，只需在主

样式中添加一次可能会更容易。scss

：

@import '~/handsontable/dist/handsontable.full.css';

使用

视图封装。无

封装

// component.ts
@Component({
  selector: 'app-table',
  template: `<hot-table ....></hot-table>`,
  styleUrls: ['./table.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TableComponent {
...
}

// component.scss
@import '~/handsontable/dist/handsontable.full.css';

//component.ts
@组成部分({
选择器：“应用程序表”，
模板：``，
样式URL:['./table.component.scss']，
封装：视图封装。无
})
导出类TableComponent{
...
}
//component.scss
@导入“~/handsontable/dist/handsontable.full.css”；

您可以尝试以下方法

@Component({
    selector: 'app-home-component',
    template: '<div></div>',
    styleUrls: [
        'path/handsontable.full.css',
        './home.component.css'
    ], 
})
export class HomeComponent{}

@组件({
选择器：“应用程序主组件”，
模板：“”，
样式URL：[
'path/handsontable.full.css'，
“./home.component.css”
], 
})
导出类HomeComponent{}

为什么它会影响日历组件？如果您在日历中重复使用

handsontable

样式，那么在

callendar

的样式中覆盖它们是否更容易？这是行不通的。由于

视图封装

和路径指定不正确，

节点模块

目录结构上的一些级别，它应该类似于：

。/../node\u模块….

取决于组件的深度。@muradm Question希望只将css应用于特定组件，而不是整个应用程序，但该组件也是角度组件，并且由于模拟的DOM，您不能从当前组件中设置父组件或子组件的样式。这就是问题的症结所在：

在可手持组件scss文件中写入导入不起作用