Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）
Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）
Angular4记账webApp练手项目之三（在angular4项目中使用路由router）
Angular4记账webApp练手项目之四（在Angular4项目中用echarts绘制图表）
Angular4记账webApp练手项目之五（Angular4项目中创建service（服务）和使用http模块）
前台源码
写在前面
在angular4项目中
例子是基于之前文章：利用angular-cli构建Angular4.X项目
可以参考官网：https://cipchk.github.io/ngx-weui/#/docs/start
本来是写在后面的回顾，感觉放在前面比较好。
1、如何使用第三方库，安装-引用(主要参考官方文档)
2、{{}}指令，单向绑定数据，声明数据-绑定数据
3、[(ngModel)]指令，双向绑定数据，声明数据-绑定数据
4、*ngFor指令，循环渲染
5、[ngStyle] 指令，动态绑定样式。
更多angular指令及用法参看官网。
安装及引用
安装
npm install angular-weui --save
安装后还需要引用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">
我们还要在app.module.ts中添加引用
import { WeUIModule } from 'angular-weui';
imports: [
BrowserModule,
FormsModule,
HttpModule,
WeUIModule // 这里也要添加
],
修改菜单组件
在app.component.html添加菜单组件
<app-menu></app-menu>
我们参照官网简化使用了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>
浏览器中查看，菜单成功创建
修改记账组件
在app.component.html添加记账组件
<app-menu></app-menu>
<app-accounting></app-accounting>
在accounting.component.ts中添加一些数据如下：
export class AccountingComponent implements OnInit {
money = ''; // 金额
billTypes = []; // 记账类型
constructor() {
let n = 0;
while (n < 20) { // 模拟一些数据
this.billTypes.push({name: '食物', id: n});
n++;
}
}
ngOnInit() {
}
}
修改accounting.component.html文件布局，添加标题，金额输入框，记账类型选择按钮
<!-- 标题 -->
<weui-navbar >
<weui-navbar-item >理财从记账开始</weui-navbar-item>
</weui-navbar>
<div style="margin-top: 50px;">
<!-- 金额输入框 -->
<weui-input type="number" name="num" placeholder="请输入金额" [(ngModel)]="money">
<label class="weui-label">￥</label>
</weui-input>
<!-- 九宫格按钮 -->
<div class="weui-grids">
<a href="javascript:;" class="weui-grid" *ngFor="let b of billTypes">
<div class="weui-grid__icon">
<i class="fa fa-2x fa-bar-chart"></i>
</div>
<p class="weui-grid__label">{{b.name}}</p>
</a>
</div>
</div>
在页面中查看，发现底部菜单和顶部标题，也跟着滚动。
解决上面问题，有两个思路，1、固定底部和顶部，2、固定中间按钮。
我选择固定中间按钮，使用动态绑定样式让中间部分的高度等于页面高度-底部和顶部的高度，设置overflo为scroll;
在accounting.component.ts中添加样式数据如下：
contentStyle = { // 绑定的样式
'overflow': 'scroll',
'height': window.screen.availHeight - 145 + 'px'
};
在accounting.component.html绑定样式
<div class="weui-grids" [ngStyle]="contentStyle">
完成
引用非样式的组件
例如提示框组件
html中添加元素
<weui-toptips [content]="toastText" #TopTip></weui-toptips>
ts文件中引入使用
import {WeUITopTips} from 'angular-weui';
@ViewChild('TopTip') TopTip: WeUITopTips;
toastText= '';
add(id: number) {
this.alert(id.toString());
}
/// 自己封装的消息提示
private alert(msg) {
this.toastText = msg;
this.TopTip.show();
}
