使用 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 并且具有高度实验性，但当然可以用它们进行实验。

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

Creating a simple button with angular2 dart and angular2_material

dart

angular

.飞镖

.html