Angular自定义组件添加默认样式

发布时间:2021-07-20 22:50:14 作者:chen
来源:亿速云 阅读:230

本篇内容介绍了“Angular自定义组件添加默认样式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

Angular的核心思想之一就是:组件化。组件化可以使我们的代码更好的复用。

在使用官方提供的Angular库Angular Material时,细心的同学就会发现,Material的每一个组件都有它自己样式,如:

每个组件添加自己独有的样式,增加css作用域的控制,实现了样式的隔离。

那么,如果给一个自定义组件添加默认样式呢?接下来我们介绍三种方法来实现我们的目标。

 

方法一:host

在组件的@Component装饰器中提供了host属性,该属性可以为我们提供很多功能的支持,其中一项就是给组件添加样式。

以Material中的Table为例:

@Component({
 moduleId: module.id,
 selector: 'mat-table, table[mat-table]',
 exportAs: 'matTable',
 template: CDK_TABLE_TEMPLATE,
 styleUrls: ['table.css'],
 host: {
   'class': 'mat-table',
 },
 providers: [{provide: CdkTable, useExisting: MatTable}],
 encapsulation: ViewEncapsulation.None,
 // See note on CdkTable for explanation on why this uses the default change detection strategy.
 // tslint:disable-next-line:validate-decorators
 changeDetection: ChangeDetectionStrategy.Default,
})
export class MatTable<T> extends CdkTable<T> {
 /** Overrides the sticky CSS class set by the `CdkTable`. */
 protected stickyCssClass = 'mat-table-sticky';
}
 

在MatTable的源码中,我们可以看到为host属性设置了'class': 'mat-table',在我们使用MatTable组件时,就会添加上默认的样式: mat-table.

注意

虽然在Angular中提供了host属性,并且官方的Material库也是使用该属性实现了很多功能,但是,在Angular编码规范中却不推荐使用该方法。详见:HostListener 和 HostBinding 装饰器 vs. 组件元数据 host


 

方法二:HostBinding

如方法一中注意事项中提到的,官方不推荐使用host属性,推荐使用@HostBinding装饰器来实现host的关于dom属性相关的功能。

还是以MatTable为例,需要做一下改造来实现相应的功能:

@Component({
 moduleId: module.id,
 selector: 'mat-table, table[mat-table]',
 exportAs: 'matTable',
 template: CDK_TABLE_TEMPLATE,
 styleUrls: ['table.css'],
//   host: {
//     'class': 'mat-table',
//   },
 providers: [{provide: CdkTable, useExisting: MatTable}],
 encapsulation: ViewEncapsulation.None,
 // See note on CdkTable for explanation on why this uses the default change detection strategy.
 // tslint:disable-next-line:validate-decorators
 changeDetection: ChangeDetectionStrategy.Default,
})
export class MatTable<T> extends CdkTable<T> {
 /** Overrides the sticky CSS class set by the `CdkTable`. */
 protected stickyCssClass = 'mat-table-sticky';

 // 使用HostBinding装饰器
 @HostBinding('class.mat-table') clz = true;
}
   

方法三:Renderer2

Renderer2是Angular的渲染引擎,我们可以通过它来为自定义组件添加默认样式。

还是以MatTable为例,需要做一下改造来实现相应的功能:

@Component({
 moduleId: module.id,
 selector: 'mat-table, table[mat-table]',
 exportAs: 'matTable',
 template: CDK_TABLE_TEMPLATE,
 styleUrls: ['table.css'],
//   host: {
//     'class': 'mat-table',
//   },
 providers: [{provide: CdkTable, useExisting: MatTable}],
 encapsulation: ViewEncapsulation.None,
 // See note on CdkTable for explanation on why this uses the default change detection strategy.
 // tslint:disable-next-line:validate-decorators
 changeDetection: ChangeDetectionStrategy.Default,
})
export class MatTable<T> extends CdkTable<T> {
 /** Overrides the sticky CSS class set by the `CdkTable`. */
 protected stickyCssClass = 'mat-table-sticky';

 constructor(render: Renderer2, eleRef: ElementRef) {
     render.addClass(eleRef.nativeElement, 'mat-table');
 }
}
   

“Angular自定义组件添加默认样式”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. CSS默认可继承样式
  2. 你们有关注过HTML标签的默认样式和浏览器默认样式吗?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

angularjs

上一篇:如何使用Spring的RetryTemplate

下一篇:虚拟主机和域名都需要备案吗

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》