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

Question

我用stagehand生成了一个angular2 dart应用程序，它按预期运行。现在，我试图在angular2-material-design的页面上添加一个简单的按钮，但是没有成功。仅显示按钮标签-看不到按钮按预期升起。以下是简单的src

。镖

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 Material 组件目前不打算在AFAIK上使用，并且是高度实验性的，但是当然可以使用它们进行实验。