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

写在前面

在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

• 1

安装后还需要引用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">

• 1
• 2
• 3

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

import { WeUIModule } from 'angular-weui';

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

修改菜单组件

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

<app-menu></app-menu>

• 1

我们参照官网简化使用了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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

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