Question

我有一个嵌套组件SearchBar作为我的Header的子代。我的组件定义：

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

search-form.component.html 正在使用以下指令：

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

和 search-form.component.html 内部我有以下规则：

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

CSS规则对嵌套指令没有影响，除非我把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
})

Angular 2附带了内置的视图封装，这使我们能够使用Shadow DOM。有三种视图封装类型：

1）ViewEncapsulation.None - 根本没有Shadow DOM。因此，也没有样式封装。

2）ViewEncapsulation.Emulated - 没有Shadow DOM但是样式封装模拟。

3）ViewEncapsulation.Native - 原生暗影DOM，尽管它的优点。

有关详情，请参阅VIEW ENCAPSULATION IN ANGULAR 2

在Angular2

1 个答案: