使用angular2 dart和angular2_material创建一个简单的按钮

Question

我使用stagehand生成了一个angular2 dart app，它按预期运行。现在我正在尝试从angular2-material-design添加一个简单的按钮到页面，但没有任何成功。仅显示按钮标签 - 未按预期显示按钮。下面是简单的src

.dart

library angular2_app.app_component;

import 'package:angular2/angular2.dart';

import 'package:angular2_material/src/components/button/button.dart';

@Component( selector: 'my-app', templateUrl: 'app_component.html' )
class AppComponent {}

的.html

<h1>My First Angular 2 App</h1>

<md-content>
  <section layout = "row"
           layout-sm = "column"
           layout-align = "center center"
           layout-wrap>
    <md-button class = "md-raised">Button</md-button>
  </section>
</md-content>

这里没有看到凸起的按钮。

感谢任何帮助。

Answer 1

MdButton组件的选择器是[md-button].not(a)（以及一些变体），这意味着该元素需要具有属性md-button，而不是元素必须是<md-button> }。这样，通过添加此属性，任何元素都可以成为md-button。

将标签更改为

<div md-button>Button</div>

或

<div md-raised-button>Button</div>

或

<a md-raised-button>Button</a>

模板中使用的指令也需要在组件中注册

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

Angular2材料成分目前不打算用于AFAIK并且具有高度实验性，但它们当然可以很好地进行实验。