[英]Angular2 and ng2Material
I'm trying to user ng2Material with Angular2, but I have a problem with the style on my code. 我正在尝试将ng2Material与Angular2一起使用,但是我的代码样式存在问题。
First : This plunker show the style as Material works (when you click over the button you see an animation over the button) 首先 :该素材显示材料工作时的样式(单击按钮时,按钮上方会显示动画)
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src",
"ng2-material":"https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.8/ng2-material"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'ng2-material': {
defaultExtension: 'js'
}
}
});
Second : This is my plunker , and if you click over the button you won't see the animation. 第二 :这是我的朋克 ,如果您单击按钮,您将看不到动画。
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'app': {defaultExtension: 'ts'},
'ng2-material': {defaultExtension: 'js'}
},
map: {"ng2-material":"https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material"}
});
System.import('app/main')
.then(null, console.error.bind(console));
What could be the problem on the second example ?, Why it doesn't take the Material style? 第二个示例可能是什么问题?为什么不采用Material样式?
It's because you don't set the Material directives ( MATERIAL_DIRECTIVES
) in your second plunkr on the InventoryApp
component in its directives
attribute. 这是因为您没有在InventoryApp
组件的directives
属性中的第二个插件中设置Material指令( MATERIAL_DIRECTIVES
)。
import {MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES} from "ng2-material/all";
@Component({
selector: 'my-app',
providers: [],
directives: [MATERIAL_DIRECTIVES] // <-----
template: `
<md-content>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<button md-raised-button class="md-raised">Button</button>
<button md-raised-button class="md-raised md-primary">Primary</button>
<div class="label">Raised</div>
</section>
</md-content>
`
})
class InventoryApp{
constructor(){
}
}
Here is the updated plunkr (from the second you provided): https://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview . 这是更新的plunkr(从您提供的第二个开始): https ://plnkr.co/edit/gQB30waaieVRNuKqxCu5?p=preview。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.