Angular的核心思想之一就是：組件化。組件化可以使我們的代碼更好的復(fù)用。

在使用官方提供的Angular庫Angular Material時(shí)，細(xì)心的同學(xué)就會(huì)發(fā)現(xiàn)，Material的每一個(gè)組件都有它自己樣式，如：

• 按鈕：     mat-button
• 工具條：     mat-toolbar
• 表格：     mat-table
• etc.

每個(gè)組件添加自己獨(dú)有的樣式，增加css作用域的控制，實(shí)現(xiàn)了樣式的隔離。

那么，如果給一個(gè)自定義組件添加默認(rèn)樣式呢？接下來我們介紹三種方法來實(shí)現(xiàn)我們的目標(biāo)。

方法一：host

在組件的@Component裝飾器中提供了host屬性，該屬性可以為我們提供很多功能的支持，其中一項(xiàng)就是給組件添加樣式。

以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屬性設(shè)置了'class': 'mat-table'，在我們使用MatTable組件時(shí)，就會(huì)添加上默認(rèn)的樣式: mat-table.

注意

雖然在Angular中提供了host屬性，并且官方的Material庫也是使用該屬性實(shí)現(xiàn)了很多功能，但是，在Angular編碼規(guī)范中卻不推薦使用該方法。詳見：HostListener 和 HostBinding 裝飾器 vs. 組件元數(shù)據(jù) host

方法二：HostBinding

如方法一中注意事項(xiàng)中提到的，官方不推薦使用host屬性，推薦使用@HostBinding裝飾器來實(shí)現(xiàn)host的關(guān)于dom屬性相關(guān)的功能。

還是以MatTable為例，需要做一下改造來實(shí)現(xiàn)相應(yīng)的功能：

@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的渲染引擎，我們可以通過它來為自定義組件添加默認(rèn)樣式。

還是以MatTable為例，需要做一下改造來實(shí)現(xiàn)相應(yīng)的功能：

@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');
 }
}