Angular Material 2的安装备忘录

2 年 ago

韵, 科

2 minutes

版本（截止至2016年12月10日）

Angular 2.2
@angular/material@2.0.0-alpha.11-3

Angular Material 2的官方网页

以下的步骤是从官方网页上实际操作中摘录出来的。

引入步骤

按照官方页面的指示，进行安装等操作。

安装Angular CLI。

npm install -g angular-cli

通过这样的方式，你就可以使用ng命令了。

接下来，我们将创建本次开发项目的根文件夹。

ng new my-project

最后，进入根目录并在项目中安装Angular Material。

npm install --save @angular/material

创建Angular Material 2的样式

在src文件夹中的styles.css文件中，预先导入基本的预置样式。

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

我有点随意地导入了图标。

在src文件夹内创建专门用于开发项目的Sass文件。（内容与官方页面一致）

@import '~@angular/material/core/theming/all-theme';
@include md-core();
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
$candy-app-warn:    md-palette($md-red);
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

请选择您喜欢的颜色。
（参考）md-light-theme是一个存在于核心中的函数。

// Creates a container object for a light theme to be given to individual component theme mixins.
@function md-light-theme($primary, $accent, $warn: md-palette($md-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $md-light-theme-foreground,
    background: $md-light-theme-background,
  );
}

在angular-cli.json配置文件中添加文件名，以便能够使用angular-cli编译所创建的专用Sass文件。

      "styles": [
        "styles.css",
        "myapp-theme.scss"
      ],

如果创建了xxxx.component.scss

与『myapp-theme.scss』相同，将其添加到angular-cli.json中，以便通过cli执行编译。

      "styles": [
        "styles.css",
        "myapp-theme.scss",
        "app/xxx/xxxx.component.scss"
      ],

引入步骤（补充于2017年1月22日）

添加 HammerJS

如果使用本设置创建Web应用程序，则Web控制台可能会显示警告信息”找不到HammerJS。某些Angular Material组件可能无法正常工作。”。

在这种情况下，请手动安装HammerJS。

npm install --save hammerjs

我也将此信息添加到angular-cli.json中。

      "scripts": [
        "../node_modules/hammerjs/hammer.min.js"
      ],

使用这个选项后，警告消息将不再显示。

我参考了这个页面。

“结束”