Question

我在Agular2中编写应用程序，我们的一些组件允许父级添加样式类。这样的事情：
儿童组件。

@Component({
selector: 'app-label-value',
templateUrl: './label-value.component.html',
styleUrls: ['./label-value.component.css']
})
export class LabelValueComponent implements OnInit {

@Input() label: string;
@Input() value: string;
@Input() valueClass: string;
@Input() labelClass: string;
@Input() cssFile: string;

getLabelClasses(){
  let classList = 'label-value-label '
  if (this.labelClass){
    classList += this.labelClass;
  }
  return classList;
}

儿童模板：

<div [ngClass]="getLabelClasses()">
  {{label}}
</div>

内部父模板。

<app-label-value 
  [label]="'Just text'" 
  [value]="'some text'"
  [labelClass]="'label-color standard-text'"
  [cssFile]="'./app.component.css'">
</app-label-value>

这不起作用。 div获取label-value-label label-color standard-text类，但它们没有从./app.component.css类文件加载（因此不显示）。
子组件需要以某种方式查找并添加./app.component.css数组的styleUrls路径。或者告诉组件在哪里查找类文件的其他方法。但我似乎无法弄明白该怎么做（或者即使它可能）。

Answer 1

在Angular4中，从父级到子级或甚至子级到父级共享样式表尚不可行您可以访问组件样式表中提到的唯一样式。

但您可以选择为组件包含多个样式表。在组件中，您可以拥有样式表列表。

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css', './someother.css', './another.css']
})

如果你想为整个项目提供一个样式，你可以在style.css中编写它，它是全局编译的，而不是特定于组件。

Answer 2

我的问题是ViewEncapsulation 在父组件上设置encapsulation: ViewEncapsulation.None之后，其CSS文件对所有其他组件都可见，包括我的子组件。所以我没有必要在我的子组件的styleUrls数组中手动包含CSS文件，浏览器发现它是amyway。
当然，最好的解决方案是将所有“全局”样式放在app根文件的style.css文件中。

Angular2动态地向styleUrls数组添加样式

2 个答案: