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)源碼

前言

1、本項(xiàng)目是基于之前文章續(xù)寫的。

用到了哪些

1、路由，子路由的使用，引入——定義Routes——router-outlet——routerLink——routerLinkActive
2、(click)指令，綁定事件
3、[ngClass]指令，綁定樣式

安裝

npm i --save @angular/router

官方網(wǎng)址：https://angular.io/guide/router

引入和使用

要使用路由，我們需要在 app.module.ts 模塊中，導(dǎo)入 RouterModule 。具體如下：

import { RouterModule } from '@angular/router';

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule, 
    WeUIModule
  ],

這樣還不行，還要定義和添加路由，修改如下：

import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [
    { path: '#', component: AccountingComponent },
    { path: 'count', component: CountComponent }
  ];

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    WeUIModule,
    RouterModule.forRoot(ROUTES)
  ],

這樣就定義好路由了，還需要在頁面上指定路由的區(qū)域。修改菜單menu.component.html如下：
routerLink 是路由地址，routerLinkActive的作用是，當(dāng) a 元素對(duì)應(yīng)的路由處于激活狀態(tài)時(shí)，weui-bar__item_on類將會(huì)自動(dòng)添加到 a 元素上。

<weui-tabbar>
  <a routerLink="#" routerLinkActive="weui-bar__item_on" class="weui-tabbar__item">
    <span class="weui-tabbar__icon">
      <i class="fa fa-edit"></i>
    </span>
    <p class="weui-tabbar__label">記賬</p>
  </a>
  <a routerLink="/count" routerLinkActive="weui-bar__item_on" class="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>
  </a>
</weui-tabbar>

app.component.html 修改如下：
router-outlet為路由內(nèi)容呈現(xiàn)的容器。

<router-outlet></router-outlet>

<app-menu></app-menu>

可以看出存在問題，進(jìn)入時(shí)沒有默認(rèn)頁面，必須點(diǎn)擊后才會(huì)到對(duì)應(yīng)頁面，可以將路由中#改為空，可以實(shí)現(xiàn)默認(rèn)進(jìn)入記賬頁面，但是routerLinkActive就失去效果了，記賬按鈕就會(huì)一直亮著。不夠后面我們用動(dòng)態(tài)綁定class的方法來代替routerLinkActive。

這里寫圖片描述

二級(jí)路由（子路由使用）

我們當(dāng)初設(shè)計(jì)統(tǒng)計(jì)有兩個(gè)頁面，按年統(tǒng)計(jì)，和按月統(tǒng)計(jì)?，F(xiàn)在來完成這個(gè)。
加入子路由

export const ROUTES: Routes = [
    { path: '#', component: AccountingComponent },
    { path: 'count', component: CountComponent, children: [
      { path: '', component: CountMonthComponent },
      { path: 'year', component: CountYearComponent }
    ] }
  ];

添加count.component.html

<div class="weui-panel__hd">
  <span>當(dāng)前記賬金額為：</span>
  <em>123456</em>
</div>
<weui-navbar style="position: relative">
  <a routerLink="/count" class="weui-navbar__item">
    <h4>月</h4>
  </a>
  <a routerLink="/count/year" class="weui-navbar__item" >
    <h4>年</h4>
  </a>
</weui-navbar>
<div>
  <router-outlet></router-outlet>
</div>

這里我們沒有用到routerLinkActive，現(xiàn)在我們用動(dòng)態(tài)樣式來實(shí)現(xiàn)

這里寫圖片描述

count.component.ts里面我們添加一個(gè)標(biāo)記

export class CountComponent implements OnInit {
  activeIndex = 0; // 當(dāng)前激活標(biāo)記
  constructor() { }

  ngOnInit() {
  }
  setActive(i) { // 設(shè)置標(biāo)記
    this.activeIndex = i;
  }
}

count.component.html 修改

<weui-navbar style="position: relative">
  <a routerLink="/count" (click)="setActive(1)" class="weui-navbar__item" [ngClass]="{'weui-bar__item_on':activeIndex == 1}">
    <h4>月</h4>
  </a>
  <a routerLink="/count/year" (click)="setActive(2)" class="weui-navbar__item" [ngClass]="{'weui-bar__item_on':activeIndex == 2}">
    <h4>年</h4>
  </a>
</weui-navbar>

修改下count.component.css里的樣式

.weui-panel__hd{
  padding:18px;
  text-align: center;
}
.weui-panel__hd span{
  font-size: 14px;
}
.weui-panel__hd em{
  font-size: 20px;
  color:  #09bb07;
  display: inherit;
  letter-spacing: 1px;
}

這里寫圖片描述