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

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中引用

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

import { WeUIModule } from 'angular-weui';

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    WeUIModule  // 这里也要添加
  ],

修改菜单组件

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

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

  
    
      
    
    
记账
  
  
    
      
    
    
统计
  

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

这里写图片描述

修改记账组件

在app.component.html添加记账组件

在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文件布局，添加标题，金额输入框，记账类型选择按钮

  理财从记账开始



  
  
    ￥
  
  
  

    
      

        
      
      
{{b.name}}
    
  

在页面中查看，发现底部菜单和顶部标题，也跟着滚动。

这里写图片描述

解决上面问题，有两个思路，1、固定底部和顶部，2、固定中间按钮。
我选择固定中间按钮，使用动态绑定样式让中间部分的高度等于页面高度-底部和顶部的高度，设置overflo为scroll;
在accounting.component.ts中添加样式数据如下：

  contentStyle = {   // 绑定的样式
    'overflow': 'scroll',
    'height': window.screen.availHeight - 145 + 'px'
  };

在accounting.component.html绑定样式

完成

这里写图片描述

引用非样式的组件

例如提示框组件
html中添加元素

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