带有 angular2-material 的工具栏组件

Question

我是 angular2-material 的新手，有点困惑 :)

我想使用angular2-material的工具栏组件。

到目前为止，我使用 npm 安装了以下软件包：

"@angular2-material/core": "^2.0.0-alpha.3"
"@angular2-material/toolbar": "^2.0.0-alpha.3"

我的应用程序文件包含以下内容：

<md-toolbar [color]="primary">
 <span>My Application Title</span>
</md-toolbar>

现在我使用打字稿定义我的组件：

@Component({
 selector: 'app',
 templateUrl: 'client/app.html'
})

现在我知道我需要以某种方式包含我安装的工具栏组件并将其添加到 @Component 装饰器内的新指令属性中。但我在网上找不到任何关于如何做到这一点的例子。

我只能在https://justindujardin.github.io/ng2-material/ 找到 ng2-material 示例

现在..我必须使用 ng2-material 吗？安装angular2-material的核心和工具栏还不够？

如果我安装 ng2-material，是否需要移除 angular2-material 核心和工具栏组件？他们一起工作吗？

任何有关该问题的信息将不胜感激。

Answer 1

你需要用 ng2-material 配置 SystemJS，仅使用 NPM 安装库是不够的。

<script>
  System.config({
    defaultJSExtensions: true,
    packages: {
      app: {
        format: 'register',
        defaultExtension: false
      }
    },
    map: {
      'ng2-material': 'node_modules/ng2-material'
    }
  });
</script>

然后您就可以将相应的组件导入到您的模块中。

import {MdToolbar} from "ng2-material/components/toolbar/toolbar";

@Component({
  selector: 'app',
  templateUrl: 'client/app.html'
  directives: [ MdToolbar ] 
})
export class SomeComponent {
}

不要忘记在组件的directives 属性中包含相应的类。

有关其他提示，请参阅此问题：

• Angular2 + ng2-material import

库的演示网站上提供了一些工具栏示例（只需单击“”查看源代码）：

• https://justindujardin.github.io/ng2-material/#/components/toolbar

Answer 2

Material2 GitHub 存储库包含一个演示应用程序 https://github.com/angular/material2/blob/master/src/demo-app/toolbar/toolbar-demo.html

<md-toolbar>
  <i class="material-icons demo-toolbar-icon">menu</i>
  <span>Default Toolbar</span>

  <span class="demo-fill-remaining"></span>

  <i class="material-icons">code</i>
</md-toolbar>

import {Component} from 'angular2/core';
import {MdToolbar} from '../../components/toolbar/toolbar';

@Component({
  selector: 'toolbar-demo',
  templateUrl: 'demo-app/toolbar/toolbar-demo.html',
  styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
  directives: [MdToolbar]
})
export class ToolbarDemo {

}