组件设置css样式_组件Angular高级编程（10）

组件是一种定义了自己的HTML内容和CSS样式的指令。一个Angular应用程序必须至少包含一个组件，用于引导过程。因为只有一个组件最后应用程序肯定会非常臃肿难以管理，所以Angular项目基本上都是由很多组件嵌套组成的。

组件用装饰器@Component修饰，这个装饰器的属性包括如下：

animations	用于配置动画
encapsulation	用于视图封装设置，控制组件样式与HTML文档其他部分隔离
selector	指定宿主CSS选择器
styles	组件模板的CSS样式
styleUrls	组件模板的CSS样式文件
template	内联模板
templateUrl	外部模板
providers	本地服务提供列表
viewProviders	为子视图服务创建本地提供程序

//创建一个test.component.ts文件import { Component } from "@angular/core";@Component({  selector: 'app-test',  template: '

This is test template!

'})export class TestComponent{}

上面创建了一个test.component.ts文件，定义了TestComponent组件。在app.module.ts的declarations中注册声明这个组件，然后在app.component.html中应用这个组件。

// app.component.htmapp-test>

Angular看到app-test这个selector就会用相应的组件模板进行替换。

上面用的是内联模板，可以定义一个test.component.html文件，将HTML模板放到这个文件中，然后在组件中，通过templateUrl指定外部模板。

import { Component } from "@angular/core";@Component({  selector: 'app-test',  templateUrl: './test.component.html'})export class TestComponent{}

类似可以使用styles指定内联样式，也可以使用styleUrls指定外部样式文件。

import { Component } from "@angular/core";@Component({  selector: 'app-test',  templateUrl: './test.component.html',  styles: ['div{color: red}']})export class TestComponent{}

这里通过styles或者styleUrls指定的样式，默认只在这个组件中起作用，不会污染到组件之外。这是因为Angular模仿了影子DOM特性，通过给元素加上唯一的属性，在CSS中加上指定这个属性，从而达到了DOM各部分彼此分离的效果。

通过F12查询编译后的HTML代码我们可以看到，组件的style加入了_ngcontent-utg-c40属性，相应的组件模板中，也加入了此属性，从而达到了此样式只应用于此模板的作用。这个功能成为视图封装(ViewEncapsulation)，可以指定组件是否以这种模拟影子DOM的形式进行视图封装，选项如下：

Emulated	默认模拟影子DOM
Native	使用浏览器的影子DOM特性。并非所有浏览器都实现了影子DOM。
None	不使用视图封装，样式应用于整个文档

import { Component, ViewEncapsulation } from "@angular/core";@Component({  selector: 'app-test',  templateUrl: './test.component.html',  styles: ['div{color: red}'],  encapsulation: ViewEncapsulation.Emulated // 使用默认视图封装})export class TestComponent{}

styles和styleUrls中的样式在默认模拟影子DOM视图封装的情况下，只能应用于组件模板本身。有三个特殊的CSS选择器，可以突破组件模板本身的限制。

:host	宿主元素
:host-context(classSelector)	具有特定CSS类的宿主祖先元素
/deep/ 或 >>>	父组件的样式也应用于子组件

父子组件之间的通信通过@Input和@Output修饰符进行。@Input修饰符修饰的属性，父组件可以传入到子组件。@Output修饰的事件，可以通过子组件发送到父组件。

// test.component.tsimport { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";@Component({  selector: 'app-test',  template: '

Name is {{testName}}

changeName ', styles: ['div{color: red} :host{font-size: 20px}'], encapsulation: ViewEncapsulation.Emulated})export class TestComponent{ @Input('name') testName: string; @Output('changeName') changeNameEvent = new EventEmitter<string>(); onClick(){ this.changeNameEvent.emit('changedName');  }}

// app.component.html<app-test name="Alice" (changeName)="newName = $event">app-test><div>  {{ newName }}div>

当点击changeName时，发送事件到父组件，显示newName。