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>

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

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

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

所有我能找到的是https://justindujardin.github.io/ng2-material/

的ng2材料示例

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

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

非常感谢有关该问题的任何信息。

Answer 1

Material2 GitHub repo包含一个演示应用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 {
}

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

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

Angular2 + ng2-material import

图书馆的演示网站上提供了一些工具栏示例（只需点击“＆lt;＆gt;”即可查看源代码）：

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

具有angular2-material的工具栏组件

2 个答案: