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

，請注意該值是一個數組，它因此可以採取幾個文件路徑。