client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19 Cannot find name 'HammerInput'. client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39 Cannot find name 'HammerManager'.
文档也给出了解释，因为框架中 md-slide-toggle 和 md-slider 两个组件依赖外部第三方组件 HammerJS 需要额外的配置。
我们不急着用文档给的 npm 或引入 cdn 路径，因为亲测还是会报错，可能我引入方式有误，为了大家少走弯路直接给亲测有效的方法
我们先去命令行工具运行 npm i --save-dev @types/hammerjs
然后编辑 tsconfig.json 文件将 hammerjs 添加到 types 下
"types": [ "jasmine", "hammerjs" ]
到这里发现页面自动刷新后报错消失了，如果需要字体图标可以在 src/index.html 中引入
<link href="https://fonts.googleapis.com/icon?family=Material+Icons">
目前为止，整个 Angular material2 已经整装待发。
我们尝试着添加多个按钮组件测试一下，修改 app.component.html 文件，完整代码如下
<h1> {{title}} </h1> <app-nav></app-nav> <button md-button>FLAT</button> <button md-raised-button>RAISED</button> <button md-icon-button> <md-icon>favorite</md-icon> </button> <button md-fab> <md-icon>add</md-icon> </button> <button md-mini-fab> <md-icon>add</md-icon> </button> <br/> <br/> <button md-raised-button color="primary">PRIMARY</button> <button md-raised-button color="accent">ACCENT</button> <button md-raised-button color="warn">WARN</button> <br/> <br/> <button md-button disabled>OFF</button> <button md-raised-button [disabled]="isDisabled">OFF</button> <button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
没问题这里手懒不写布局样式了，直接给 br 换行大家方便看些，待页面部署完成后我们会看到以下效果
炫酷的组件，更多组件语法参考上面给的链接，到这里相信大家学习 angular2 的信心倍增，真对已有组件可以完成快速开发，下一步就是大家去 Angular2 官网看其它概念的时候啦，处理数据实现与后端对接。项目上线，大功告成。
总结
当今前端框架层出不穷，不要盲从，要根据公司需求和员工的工作经验选择框架，真说到性能方面哪个框架快的话，我虽然没测试过，但我确定 React、Vue、Angular2 几个之间相差无几，除非在实现的时候代码存在问题，因为这几个框架都经过了大型项目的考验。以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章: