Angular2 材质 md 按钮错误 [英] Angular2 Material md-button Error
问题描述
我之前看到 Angular2 推出了 RC5,所以我决定更新我的一个测试应用程序以查看更改以及如何调整.此应用程序使用 Material2,我也将其更新为 Alpha 7.2,但在尝试使用 md-button 组件时出现此错误
I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component
"模板解析错误:无法绑定到'md-ripple-trigger',因为它不是div"的已知属性.("*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 无法绑定到md-ripple-color",因为它不是已知的'div' 的属性.(吨波纹"[class.md-button-ripple-round]="isRoundButton()"[md-ripple-trigger]="getHostElement()" [错误->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219"
"Template parse errors: Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180 Can't bind to 'md-ripple-color' since it isn't a known property of 'div'. ("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
的新组件上使用它,这是添加了 Material 的 Angular CLI 创建的文件
I'm using it on a new component I'm trying to add called nav-bar
, here's the Angular CLI created file with Material added
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>
推荐答案
尝试在你的AppModule
中导入MdRippleModule
:
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
指令:
Or pass MdRipple
directive within your component:
...
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 {
...
这篇关于Angular2 材质 md 按钮错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!