如何使用angular2_components

Question

有人可以告诉我如何使用angular2_components吗？ 我尝试如下：

<material-button>Test</material-button> 

但是它没有显示预期的按钮。

更新我的工作：

pubspec yaml：

dependencies:
  angular2: ^2.0.0
  angular2_components: ^0.1.0
dev_dependencies:
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart

app_component.dart：

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';

@Component(
    selector: 'my-app',
    directives: const[
      MaterialButtonComponent,
    ],
    styleUrls: const ['app_component.css'],
    templateUrl: 'app_component.html')
class AppComponent {}

该按钮仍然看起来像：

并收到错误消息：

我究竟做错了什么？

Answer 1

您需要添加

dependencies:
  angular2_components: ^0.1.1

到pubspec.yaml文件并运行pub get 。

然后，您需要导入MaterialButtonComponent

import 'package:angular2_components/angular2_components.dart'
    show MaterialButtonComponent, materialProviders; // the show Xxx is optional

然后将其添加到要使用它的组件的@Directives()中

@Component(
  selector: 'my-app',
  directives: const [
    MaterialButtonComponent,
  ],
  providers: [materialProviders],
  ...
)

有关更多详细信息，请参见https://dart-lang.github.io/angular2_components_example/和https://github.com/dart-lang/angular2_components_example/blob/master/lib/app_component.html