通过styleUrl编写用于Angular 2视图封装的css

Question

我正在制作一个简单的hello world应用程序（目前是从angular 1迁移过来的），我使用angular-CLI生成组件，它创建了一个样式表，并通过styleurls将其链接到组件中。我的样式都没有按照我认为的方式应用，除非我做了“viewencapsulation.None”。是不是我漏了什么？或者有没有更好的方法来写出css呢？

如果我使用默认封装（viewencapsulation.emulated或甚至native）的话，我的样式根本不会出现。

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';  

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

constructor() { }

ngOnInit() {
}
}

我的CSS看起来是这样的：

.app-header{
    display: block;
    opacity:0.2;
}

Answer 1

您需要使用以下CSS：

:host() {
    display: block;
    opacity:0.2;
}