提问者:小点点

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


我正在制作一个简单的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;
}

共1个答案

匿名用户

您需要使用以下CSS:

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