带有 angular2-material 的工具栏组件

Question

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

我想用angular2的toolbar组件-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

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 {

}

Answer 2

您需要使用 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 {
}

不要忘记将相应的 class 包含到组件的 directives 属性中。

查看此问题以获得更多提示：

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

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

带有 angular2-material 的工具栏组件

toolbar component with angular2-material

typescript

angular-material

angular