Question

Angular2的材质工具栏。错误：[my_app上的TemplateCompiler错误| lib / app_header / app_header.ng_meta.json]：找不到名称的指令/管道条目：MaterialToolbarComponent 。请注意，Dart变压器对可重复使用的预定义指令/管道列表（也称为“指令/管道别名”）的支持有限。详情请见构建完成时出现1个错误。

错误：URI的目标不存在：'package：material_toolbar / material_toolbar.dart'。（[my_app] lib \ app_header \ app_header.dart上的uri_does_not_exist：6）
错误：const列表文字中的值必须是常量。（[my_app] lib \ app_header \ app_header.dart中的non_constant_list_element：15）
错误：未定义的名称'MaterialToolbarComponent'。（[my_app] lib \ app_header \ app_header.dart中的undefined_identifier：15）
错误：常量创建的参数必须是常量表达式。（[my_app] lib \ app_header \ app_header.dart上的const_with_non_constant_argument：15）

APP-header.html中

<header role="banner" id="header">
    <material-toolbar [background]="background" [foreground]="foreground" [elevation]="elevation" [icon]="icon"
                      [title]="title" [middleTitle]="middleText" [bottomTitle]="bottomText" [mediumTall]="size == 'medium'"
                      [tall]="size == 'tall'">
        <div class="right-content">
            <material-button icon>
                <glyph icon="refresh"></glyph>
            </material-button>
            <material-button icon>
                <glyph icon="add"></glyph>
            </material-button>
        </div>
        <div class="middle-content">
            <material-input></material-input>
            <material-button icon>
                <glyph icon="search"></glyph>
            </material-button>
        </div>
        <div class="bottom-content">
            <material-button icon>
                <glyph icon="content_cut"></glyph>
            </material-button>
            <material-button icon>
                <glyph icon="content_copy"></glyph>
            </material-button>
            <material-button icon>
                <glyph icon="content_paste"></glyph>
            </material-button>
        </div>
        <material-progress class="fit" [indeterminate]="true"></material-progress>
    </material-toolbar>
    <material-fab [style.background-color]="background" raised>
        <glyph icon="search" [style.color]="foreground"></glyph>
    </material-fab>
    <div id="content">
        <material-radio-group [(ngModel)]="size">
            <material-radio [checked]="true" value="standard">
                Standard
            </material-radio>
            <material-radio value="medium">
                Medium-Tall
            </material-radio>
            <material-radio value="tall">
                Tall
            </material-radio>
        </material-radio-group>
        <br/>
        <material-input floatingLabel label="Title" [(ngModel)]="title"></material-input>
        <br/>
        <material-input *ngIf="size == 'medium' || size == 'tall'" floatingLabel label="Middle Text"
                        [(ngModel)]="middleText"></material-input>
        <br/>
        <material-input *ngIf="size == 'tall'" floatingLabel label="Bottom Text" [(ngModel)]="bottomText"></material-input>
        <br/>
        <material-input floatingLabel label="Toolbar Icon" [(ngModel)]="icon"></material-input>
        <br/>
        <material-input floatingLabel label="Background Color" [(ngModel)]="background"></material-input>
        <br/>
        <material-input floatingLabel label="Foreground Color" [(ngModel)]="foreground"></material-input>
        <br/>
        <label>Elevation: {{elevation}}</label>
        <material-button raised primary (click)="up()">
            <glyph icon="add"></glyph>
        </material-button>
        <material-button raised [disabled]="elevation <= 0" (click)="down()">
            <glyph icon="remove"></glyph>
        </material-button>
    </div>
</header>

APP-header.dart

import 'package:angular2/angular2.dart';
import 'package:angular_components/angular_components.dart';
import 'package:material_toolbar/material_toolbar.dart';

@Component(
  selector: 'app-header',
  styleUrls: const ['app_header.css'],
  templateUrl: 'app_header.html',
  directives: const [
    CORE_DIRECTIVES,
    materialDirectives,
    MaterialToolbarComponent,
  ],
  providers: const [materialProviders],
)
class AppHeader {

  int elevation = 2;
  String background = '#3f51b5',
      foreground = 'white',
      icon = 'menu',
      title = 'Material Toolbar Example';
  String middleText = 'Middle Text', bottomText = 'Bottom Text';
  String size = 'standard';

  void up() {
    elevation++;
  }

  void down() {
    if (elevation > 0) elevation--;
  }
}

AngularDart的材质工具栏

0 个答案: