Angular4記賬webApp練手項(xiàng)目之一（利用angular-cli構(gòu)建Angular4.X項(xiàng)目）
Angular4記賬webApp練手項(xiàng)目之二（在angular4項(xiàng)目中使用Angular WeUI）
Angular4記賬webApp練手項(xiàng)目之三（在angular4項(xiàng)目中使用路由router）
Angular4記賬webApp練手項(xiàng)目之四（在Angular4項(xiàng)目中用echarts繪制圖表）
Angular4記賬webApp練手項(xiàng)目之五（Angular4項(xiàng)目中創(chuàng)建service（服務(wù)）和使用http模塊）
前臺(tái)源碼

寫在前面

在angular4項(xiàng)目中
例子是基于之前文章：利用angular-cli構(gòu)建Angular4.X項(xiàng)目
可以參考官網(wǎng)：https://cipchk.github.io/ngx-weui/#/docs/start

本來(lái)是寫在后面的回顧，感覺(jué)放在前面比較好。

1、如何使用第三方庫(kù)，安裝-引用(主要參考官方文檔)
2、{{}}指令，單向綁定數(shù)據(jù)，聲明數(shù)據(jù)-綁定數(shù)據(jù)
3、[(ngModel)]指令，雙向綁定數(shù)據(jù)，聲明數(shù)據(jù)-綁定數(shù)據(jù)
4、*ngFor指令，循環(huán)渲染
5、[ngStyle] 指令，動(dòng)態(tài)綁定樣式。
更多angular指令及用法參看官網(wǎng)。

安裝及引用

安裝

npm install angular-weui --save

安裝后還需要引用weui 樣式以及我們的font-awesome圖標(biāo)苦，在我們項(xiàng)目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>

我們參照官網(wǎng)簡(jiǎn)化使用了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">統(tǒng)計(jì)</p>
  </weui-tabbar-item>
</weui-tabbar>

瀏覽器中查看，菜單成功創(chuàng)建

這里寫圖片描述

修改記賬組件

在app.component.html添加記賬組件

<app-menu></app-menu>
<app-accounting></app-accounting>

在accounting.component.ts中添加一些數(shù)據(jù)如下：

export class AccountingComponent implements OnInit {
  money = ''; // 金額
  billTypes = []; // 記賬類型
  constructor() {
    let n = 0;
    while (n < 20) { // 模擬一些數(shù)據(jù)
      this.billTypes.push({name: '食物',  id: n});
      n++;
    }
  }
  ngOnInit() {

  }

}

修改accounting.component.html文件布局，添加標(biāo)題，金額輸入框，記賬類型選擇按鈕

<!-- 標(biāo)題 -->
<weui-navbar >
  <weui-navbar-item >理財(cái)從記賬開(kāi)始</weui-navbar-item>
</weui-navbar>

<div style="margin-top: 50px;">
  <!-- 金額輸入框 -->
  <weui-input type="number" name="num" placeholder="請(qǐng)輸入金額" [(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>

在頁(yè)面中查看，發(fā)現(xiàn)底部菜單和頂部標(biāo)題，也跟著滾動(dòng)。

這里寫圖片描述

解決上面問(wèn)題，有兩個(gè)思路，1、固定底部和頂部，2、固定中間按鈕。
我選擇固定中間按鈕，使用動(dòng)態(tài)綁定樣式讓中間部分的高度等于頁(yè)面高度-底部和頂部的高度，設(shè)置overflo為scroll;
在accounting.component.ts中添加樣式數(shù)據(jù)如下：

  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();
  }