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

Question

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

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

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

Answer 1

这篇文章提供了有关 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;
}

链接到工作演示。

Answer 2

您可以使用 Material Web Components 来创建新的 Angular 组件。

https://angular-material.dev/courses/mcw-ng-components/mcw-ng-components/overview