方法一:在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 | 指令和组件 |