如何在 Angular Material 2 中构建自定义组件

Question

是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。

之前我使用的是 Sencha/ExtJS 框架，通过扩展它在顶级 EXTJS 基础组件上构建自己的组件非常简单。

我查看了 Angular Material 2 CDK，但没有关于如何在其之上构建自定义组件的文档。

Answer 1

article 提供了有关 CDK 的出色解释和示例。

CDK 的目标是为开发人员提供更多工具来构建出色的 网络组件。这对项目特别有用 想要利用 Angular Material 的功能的人 不采用 Material Design 视觉语言。

您可以使用 CDK 来扩展组件，但是，据我所知，目前只有一些组件可用，即overlay、stepper 和table。据我所知，更多的材料组件将进入 CDK 内部以用作基础。

目前，您无法修改 material2 组件的行为，但是，您可以覆盖样式以查看您想要的样式。您需要使用ViewEncapsulation 来实现这一点。

例如，如果要自定义<md-tab> 样式，可以执行以下操作：

Typescript 代码的变化：

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

组件样式 css：

/* Styles for tab labels */
.mat-tab-label {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
    min-width: 25px !important;
    padding: 5px;
    background-color: transparent;
    color: red;
    font-weight: 700;
}

/* Styles for the ink bar */
.mat-ink-bar {
    background-color: green;
}

链接到working demo。