Creating a simple button with angular2 dart and an

问题:

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.

回答1:

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.