5

Angular2 が RC5 をローンチしたことを以前に見たので、テスト アプリの 1 つを更新して、変更と調整方法を確認することにしました。このアプリは Material2 を使用しており、Alpha 7.2 にも更新しましたが、md-button コンポーネントを使用しようとするとこのエラーが発生します

「テンプレート解析エラー: 'div' の既知のプロパティではないため、'md-ripple-trigger' にバインドできません。 ("*ngIf="isRippleEnabled()" class="md-button-ripple" [ class.md-button-ripple-round]="isRoundButton()" [エラー ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba( 255, 255, 255, 0.2)"): MdButton@0:180 「div」の既知のプロパティではないため、「md-ripple-color」にバインドできません。("ton-ripple" [class.md-button-ripple-round]="isRoundButton()" [md-ripple-trigger]="getHostElement()" [ERROR ->][md-ripple-color]=" isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219"

と呼ばれる追加しようとしている新しいコンポーネントで使用していnav-barます。マテリアルが追加された Angular CLI 作成ファイルを次に示します。

TypeScript ファイル

import { Component, OnInit } from '@angular/core';
import { MdToolbar } from '@angular2-material/toolbar';
import { MdButton } from '@angular2-material/button';
import { MdIcon, MdIconRegistry } from '@angular2-material/icon';

@Component({
  moduleId: module.id,
  selector: 'nav-bar',
  templateUrl: 'nav-bar.component.html',
  styleUrls: ['nav-bar.component.css'],
  directives: [ 
    MdToolbar, 
    MdButton,
    MdIcon 
  ],
  providers: [ 
    MdIconRegistry 
  ]
})

export class NavBarComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

HTMLファイル

<md-toolbar>
  <button md-button>
    <md-icon>menu</md-icon>
  </button>
  NavBar
</md-toolbar>
4

1 に答える 1

9

あなたのにインポートMdRippleModuleしてみてくださいAppModule：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { HttpModule} from '@angular/http';
import { MdRippleModule } from '@angular2-material/core/core'; <== this line

@NgModule({
  imports:      [ BrowserModule, HttpModule, MdRippleModule ], <== add here
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

またはMdRipple、コンポーネント内でディレクティブを渡します。

...
import { MdRipple } from '@angular2-material/core/core'; <== this line
@Component({
  moduleId: module.id,
  selector: 'nav-bar',
  templateUrl: 'nav-bar.component.html',
  styleUrls: ['nav-bar.component.css'],
  directives: [ 
    MdToolbar, 
    MdButton,
    MdIcon,
    MdRipple <== add here
  ],
  providers: [ 
    MdIconRegistry 
  ]
})
export class NavBarComponent implements OnInit {
...
于 2016-08-13T05:01:35.740 に答える