使用angular2 dart和angular2_material创建一个简单的按钮 [英] Creating a simple button with angular2 dart and angular2_material

问题描述

我使用stagehand生成了一个angular2 dart应用程序，它按预期运行。现在我想添加一个简单的按钮从angular2材料设计到页面，但没有任何成功。只显示按钮标签 - 按钮未按预期升起。下面是简单的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> 
  

这里看不到凸起的按钮。

< 组件是 [md-button] .not（a）（和一些变体），这意味着该元素需要有一个属性 md- code>，而不是元素必须是< md-button> 。这样，任何元素都可以通过添加此属性成为 md-button 。

将标签更改为

 < div md-button> Button< / div> 
  

或

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

或

 < a md-raised-button>按钮< / a> 
 

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

  @Component（
 selector：'my-app'）
 @View（
 templateUrl：'app_component.html' 
 directives：const [MdButton]）
 class AppComponent {} 
  

Angular2材料组件目前不是用于AFAIK和高度实验，但它当然很好，他们试验。

I generated an angular2 dart app with stagehand and it run as expected. Now I am trying to add a simple button from angular2-material-design to the page but not with any success. Only the button label is displayed - the button is not seen raised as expected. Below are the simple 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>

Here the raised button is not seen.

Any help is appreciated.

解决方案

The selector of the MdButton component is [md-button].not(a) (and some variants) which means the element needs to have an attribute md-button and not that the element has to be <md-button>. This way any element can become an md-button by adding this attribute.

Change the tag to

<div md-button>Button</div>

or

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

or

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

Also directives used in the template need to be registered with the component

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

The Angular2 material components are not intended to be used at this time AFAIK and highly experimental but it's of course fine to experiment with them.

这篇关于使用angular2 dart和angular2_material创建一个简单的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！