组件模板样式封装

Angular默认将组件样式封装在组件的上下文。也就是这些样式只对当前的组件生效。

如果俩个组件都定义了同样的样式名称，尽管其属性不同，也并不会互相干扰。

它们既不会被模板中嵌入的组件继承，也不会被通过内容投影（如 ng-content）嵌进来的组件继承。

在组件内设置宿主元素的样式

因为组件模板中并不包含宿主元素，所以我们不能直接在该组件中通过上面的方式去设置它的样式。

使用:host 伪类选择器为宿主元素设置样式。

xxxxxxxxxx
/* 组件模板样式文件product-list.component.css */

:host{
    color:yellow
}

在@Component装饰器的元数据中添加host属性来把它绑定到宿主元素上。

xxxxxxxxxx
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
  //这里的host代表宿主元素，对象中的属性可以是原生dom的属性
  host: {
    style: 'font-size:38px'
  }
})

实时效果反馈

1.下列描述错误的是：

A 样式文件不是必须的

B :host伪类是组件宿主元素的选择器

C 一个组件只能定义一个样式文件

D 在模板中使用<style></style>标签定义样式

答案

1=>C