方法一：在css中设置样式
for CSS added to the component
:host ::ng-deep mySelector {
background-color: blue;
}
for CSS added to index.html
body ::ng-deep mySelector {
background-color: green;
}
方法二：在ng生命周期中设置样式
使用方法二，我们得了解ng4的生命周期；经过测试，在ngAfterViewChecked方法中可以设置样式
|
名称 |
时机 |
接口 |
范围 |
|
ngOnChanges |
当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。 |
OnChanges |
指令和组件 |
|
ngOnInit |
在第一轮 ngOnChanges 完成之后调用。 ( 译注：也就是说当每个输入属性的值都被触发了一次ngOnChanges 之后才会调用ngOnInit ，此时所有输入属性都已经有了正确的初始绑定值 ) |
OnInit |
指令和组件 |
|
ngDoCheck |
在每个 Angular 变更检测周期中调用。 |
DoCheck |
指令和组件 |
|
ngAfterContentInit |
当把内容投影进组件之后调用。 |
AfterContentInit |
组件 |
|
ngAfterContentChecked |
每次完成被投影组件内容的变更检测之后调用。 |
AfterContentChecked |
组件 |
|
ngAfterViewInit |
初始化完组件视图及其子视图之后调用。 after initializing the component‘s views and child views. |
AfterViewInit |
组件 |
|
ngAfterViewChecked |
每次做完组件视图和子视图的变更检测之后调用。 |
AfterViewChecked |
组件 |
|
ngOnDestroy |
当 Angular 每次销毁指令 / 组件之前调用。 |
OnDestroy |
指令和组件 |
