如何在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> 

WHE我从来没有在这两个组件的html中运行我的项目，它显示了First Component的CSS。请他

Answer 1

在定义的角度成分，你可以指定将仅由组件使用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 
} 

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