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 rel="stylesheet">
<link 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();
}
