Angular 2 的材质组件答案

【问题标题】：Material Components for Angular 2Angular 2 的材质组件
【发布时间】：2017-05-02 13:44:48
【问题描述】：

我正在尝试仅包含来自 Github 上的 material-components 存储库的小吃栏组件：

https://github.com/material-components/material-components-web

【问题讨论】：

你看过最新版的官方angular-material包吗？它允许您仅导入要在项目中使用的特定材料模块。
其实我说的不是@angular/material 包。我说的是 material.io 中的 MD 组件，我认为这对于 Angular 材料来说几乎没有什么不同。结帐material.io 和github.com/material-components/material-components-web
你考虑过切换到@angular/material 吗？它旨在与 ng2 一起“开箱即用”。
@angular/material 很好，但仍然不如其他框架的材料组件库那么完善和功能完整。这两个项目不应该一起工作吗？似乎他们有相似的目标。
关于材料组件和材料 2 之间协作的问题的答案在此线程中 -> groups.google.com/forum/#!searchin/angular-material2/…

标签： angularjs angular-material material-components

【解决方案1】：

你可以试试https://material.angular.io

HTML

<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

import {Component} from '@angular/core';
import {MdSnackBar} from '@angular/material';


@Component({
  selector: 'snack-bar-component-example',
  templateUrl: './snack-bar-component-example.html',
})
export class SnackBarComponentExample {
constructor(public snackBar: MdSnackBar) {}

openSnackBar() {
 this.snackBar.openFromComponent(PizzaPartyComponent, {
   duration: 500,
  });
}
 }


@Component({
selector: 'snack-bar-component-example-snack',
templateUrl: './snack-bar-component-example-snack.html',
styleUrls: ['./snack-bar-component-example-snack.css'],
})
 export class PizzaPartyComponent {}

来自实际文档的示例https://material.angular.io/components/component/snack-bar

【讨论】：

【解决方案2】：

Blox Material 库为 Web 和 Angular 提供了 Material Components 之间的集成。它还具有您要使用的材料组件快餐栏组件的绑定。

这里有该库的入门指南：https://blox.src.zone/material#/guides/gettingstarted

可以在此处找到小吃店消息的文档和代码示例：https://blox.src.zone/material#/directives/snackbar

简而言之，您必须安装 @blox/material 库并将其 MaterialModule 导入您的 Angular 应用程序。这将注册一个MdcSnackBarService，可用于创建小吃店消息。 mdc-snackbar 的所有选项、设置和主题化可能性均可用。

如果您遵循入门指南并仅使用MdcSnackBarService，您的生产版本将仅包含快餐栏组件的代码。

如果您想在没有现有集成库的情况下执行此操作，不妨查看 Blox Material 的源代码以获得灵感。

【讨论】：