Angular4记帐webApp练手项目之二（在angular4项目中使用Angular WeUI）

写在前面

在angular4项目中 
例子是基于以前文章：利用angular-cli构建Angular4.X项目 
能够参考官网：https://cipchk.github.io/ngx-weui/#/docs/start

原本是写在后面的回顾，感受放在前面比较好。

一、如何使用第三方库，安装-引用(主要参考官方文档) 
二、{{}}指令，单向绑定数据，声明数据-绑定数据 
三、[(ngModel)]指令，双向绑定数据，声明数据-绑定数据 
四、*ngFor指令，循环渲染 
五、[ngStyle] 指令，动态绑定样式。 
更多angular指令及用法参看官网。

安装及引用

安装

npm install angular-weui --save

• 1

安装后还须要引用weui 样式以及咱们的font-awesome图标苦，在咱们项目index.html中引用

<!-- index.html --> <link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

• 1
• 2
• 3

咱们还要在app.module.ts中添加引用

import { WeUIModule } from 'angular-weui'; imports: [ BrowserModule, FormsModule, HttpModule, WeUIModule // 这里也要添加 ],

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

修改菜单组件

在app.component.html添加菜单组件

<app-menu></app-menu>

• 1

咱们参照官网简化使用了tabbar组件，修改menu.component.html以下：

<weui-tabbar> <weui-tabbar-item> <span class="weui-tabbar__icon"> <i class="fa fa-edit"></i> </span> <p class="weui-tabbar__label">记帐</p> </weui-tabbar-item> <weui-tabbar-item> <span class="weui-tabbar__icon"> <i class="fa fa-bar-chart"></i> </span> <p class="weui-tabbar__label">统计</p> </weui-tabbar-item> </weui-tabbar> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

浏览器中查看，菜单成功建立