Применить правила CSS для вложенного компонента в Angular2

Question

У меня есть вложенный компонент SearchBar как дочерний элемент моего заголовка. Мой компонент определения:

@Component({ 
    moduleId: module.id, 
    selector: 'search-form', 
    templateUrl: 'search-form.component.html', 
    styleUrls: [ 'search-form.component.css'] 
}) 

поисково-form.component.html использует следующую директиву внутри:

<tag-input placeholder="Add tags ..." 
    [(model)]="tagsArray" 
    (tagsChanged)="onTagsChange($event)" 
    (tagsAdded)="onTagsAdded($event)" 
    (tagRemoved)="onTagRemoved($event)" 
    [delimiterCode]="[32]"></tag-input> 

и внутри поисково-form.component.html У меня есть следующие правило:

.ng2-tag-input-field { 
    padding: 5px; 
    border-radius: 6px; 
    margin-right: 10px; 
    direction: ltr; 
    text-align: right; 
} 

Правила CSS не влияют на вложенный di rective, если я не помещаю CSS в файл Styles.css. Почему это работает не так, как ожидалось?

Answer 1

Вам необходимо изменить viewEncapsulation компонента.

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

@Component({ 
    moduleId: module.id, 
    selector: 'search-form', 
    templateUrl: 'search-form.component.html', 
    styleUrls: [ 'search-form.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 

Угловой 2 поставляется с видом капсулирования встраиваемый, что позволяет нам использовать Shadow DOM. Существует три типа инкапсуляции вида:

1) ViewEncapsulation.None - Отсутствие тени DOM вообще. Следовательно, также нет инкапсуляции стиля.

2) ViewEncapsulation.Emulated - Отсутствие Shadow DOM, но эмуляция инкапсуляции стиля.

3) ViewEncapsulation.Native - Native Shadow DOM со всей его добротой.

Для более см VIEW ENCAPSULATION IN ANGULAR 2