angular - 带有 angular2-material 的工具栏组件

Question

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

我想使用angular2-material的toolbar组件。

到目前为止，我使用 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>

现在我使用 typescript 定义我的组件:

@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

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 {

}