Shulou(Shulou.com)06/02 Report--

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

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

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

按钮： mat-button工具条： mat-toolbar表格： mat-tableetc.

每个组件添加自己独有的样式，增加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 extends CdkTable {

/** 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 extends CdkTable {

/** 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 extends CdkTable {

/** 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自定义组件添加默认样式"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.