angular(三) 总结

一.个人理解

declarations :声明,被声明的组件才属于此module,才可以使用此module下import的东西

imports:导入,公共模块或组件

exports:导出

providers  : 创建获取服务实例

bootstrap :主视图,根组件

二.@component组件装饰器

元数据如下:

selector:组件选择器,被调用时的组件名

templateUrl:html模板,引用html地址

styleUrls:样式地址,数组

encapsulation:  样式的封装策略，你可以通过该属性将样式的生效范围从当前组件改为全局    

三.encapsulation属性详解

@Component({
  selector: 'app-dig-table',
  templateUrl: './dig-table.component.html',
  styleUrls: ['./dig-table.component.less'],
  encapsulation: ViewEncapsulation.None,
})

1.Emulated  默认项，样式有范围封装，父组件不影响子组件的样式 （angular提供的样式封装机制）

2.None  不提供任何封装，样式直接应用到整个document。 （向下影响自己的子组件，向上影响自己的父组件）

3.Shadow  使用原生的shadow封装样式，dom结构中可以看到阴影根（shadow-root）,只对shadow-root 范围内的组件有效

4.native 已弃用

参考文章