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ì)』妊颍現(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;
}
