WEBAPP开发之Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）-职坐标

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

白羽 2018-07-19 来源：网络阅读 1180 评论 0

摘要：本文将带你了解WEBAPP开发之Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI），希望本文对大家学WebApp有所帮助。

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

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

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

安装及引用
安装
npminstallangular-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中添加一些数据如下：
exportclassAccountingComponentimplementsOnInit{
money='';//金额
billTypes=[];//记账类型
constructor(){
letn=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());
}
///自己封装的消息提示
privatealert(msg){
this.toastText=msg;
this.TopTip.show();
}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

app排行软件手机应用开发公司 app软件编辑

本文由 @白羽发布于职坐标。未经许可，禁止转载。