角度2的材质组件

Question

我尝试在Github上只包含material-components repo中的snackbar组件：

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 Material库提供了Web和Angular材质组件之间的集成。它还具有您想要使用的material-components snackbar组件的绑定。

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

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

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

如果您遵循入门指南并且只使用MdcSnackBarService，那么您的产品构建将只包含snackbar组件的代码。

如果你想在没有现有集成库的情况下做到这一点，也许可以看看Blox材料中的源码以获得灵感。