我正在制作一个简单的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;
}
您需要使用以下CSS:
:host() {
display: block;
opacity:0.2;
}