如何使用 Angular 2 组件

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