如何在角度材料2中构建自定义组件

Question

是否有任何标准方法在角度材料2上构建自己的组件或通过扩展现有组件。

早些时候我使用了Sencha/ExtJS框架，并且通过扩展EXTJS基础组件在顶层构建自己的组件非常简单。

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

Answer 1

你需要angular-cli来做到这一点。第一条命令是

$ ng g m customComponent 

这将创建一个模块。然后

$ ng g c customComponent 

这将创建一个组件（您可以重命名）。在模块的装饰，添加exports财产，在imports级别：

exports: [CustomComponentComponent] 

现在，创建您的成分，当你想在任何地方使用它，只是导入CustomComponentModule有关模块中。

Answer 2

这个article提供了一个很好的解释和关于CDK的例子。

CDK的目标是为开发人员提供更多工具来为网络构建真棒 组件。这对于想要利用角度材料 的特性而不采用Material Design视觉语言的项目 特别有用。

您可以使用CDK来扩展组件，但是，只有某些组件可在，我知道，就是那一刻，overlay，stepper和table。据我所知，更多的材料成分将进入CDK内部，以此作为基础。

此刻，你不能修改材料2组件的行为，但是，您可以覆盖样式看你怎么想。你需要使用ViewEncapsulation来实现这一点。

例如，如果你想定制<md-tab>样式，你可以做到以下几点：

变化打字稿代码：

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。