Angular4記賬webApp練手項目之一（利用angular-cli構建Angular4.X項目）
Angular4記賬webApp練手項目之二（在angular4項目中使用Angular WeUI）
Angular4記賬webApp練手項目之三（在angular4項目中使用路由router）
Angular4記賬webApp練手項目之四（在Angular4項目中用echarts繪制圖表）
Angular4記賬webApp練手項目之五（Angular4項目中創建service（服務）和使用http模塊）
前臺源碼

前言

1、本項目是基于之前文章續寫的。

用到了哪些

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

安裝

npm i --save @angular/router

官方網址：https://angular.io/guide/router

引入和使用

要使用路由，我們需要在 app.module.ts 模塊中，導入 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)
  ],

這樣就定義好路由了，還需要在頁面上指定路由的區域。修改菜單menu.component.html如下：
routerLink 是路由地址，routerLinkActive的作用是，當 a 元素對應的路由處于激活狀態時，weui-bar__item_on類將會自動添加到 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">統計</p>
  </a>
</weui-tabbar>

app.component.html 修改如下：
router-outlet為路由內容呈現的容器。

<router-outlet></router-outlet>

<app-menu></app-menu>

可以看出存在問題，進入時沒有默認頁面，必須點擊后才會到對應頁面，可以將路由中#改為空，可以實現默認進入記賬頁面，但是routerLinkActive就失去效果了，記賬按鈕就會一直亮著。不夠后面我們用動態綁定class的方法來代替routerLinkActive。

這里寫圖片描述

二級路由（子路由使用）

我們當初設計統計有兩個頁面，按年統計，和按月統計?，F在來完成這個。
加入子路由

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>當前記賬金額為：</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，現在我們用動態樣式來實現

這里寫圖片描述

count.component.ts里面我們添加一個標記

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

  ngOnInit() {
  }
  setActive(i) { // 設置標記
    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;
}

這里寫圖片描述