如何在Angular 2中分离两个独立组件的CSS？

Question

在组件1中

CSS -

ngx-dnd-container {
    color:black;
    background-color: white;
}

HTML -

<ngx-dnd-container
            [model]="targetItemsA"
            dropZone="multiple-target-a"
          </ngx-dnd-container>

在组件2中

CSS -

ngx-dnd-container {
    color:white;
    background-color: orange;
}

<ngx-dnd-container
            [model]="targetItemsA"
            dropZone="multiple-target-a"
          </ngx-dnd-container>

每当我在两个组件的html中运行我的项目时，它都会显示第一个组件的CSS。请他

Answer 1

定义Angular Component时，您可以指定仅由Component使用的CSS样式表，如下所示：

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

@Component({
  selector: 'app-my-component',
  templateUrl: 'my.component.html',
  styleUrls: ['my.component.scss']  // <-- Here
})
export class MyComponent {
  // Component code
}

请注意，该值是一个数组，因此它可以采用多个文件路径。