angular - 如何使用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