angularjs - Angular 2 的材质组件

Question

我正在尝试仅包含来自 Github 上的材料组件存储库的小吃吧组件：

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

Answer 1

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

HTML

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

TS

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

Answer 2

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

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

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

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

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

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