Angular4记账webApp练手项目之三(在angular4项目中使用路由router)

前台源码

前言

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。

这里写图片描述

二级路由(子路由使用)

我们当初设计统计有两个页面,按年统计,和按月统计。现在来完成这个。 加入子路由

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;
}

这里写图片描述

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏草根专栏

使用angular4和asp.net core 2 web api做个练习项目(四)

Auth Guard 该系统的大部分页面都应该是用户登陆以后才可以看见, 没有登陆的话直接应该跳转到登陆页面. 首先建立authguard: ng g g gu...

396100
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(6.个人中心)

如果报错(往往因为mysql的版本8.0什么的,加密方式导致初始化脚本报错),解决办法

25920
来自专栏前端大白专栏

基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

41270
来自专栏Youngxj

[源码分享]Emlog博客后台自适应主题 N+

90840
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

16910
来自专栏木子墨的前端日常

前端项目性能优化笔记

饱暖思淫欲,当我们完成基本的业务需求之后,我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等,以下是我在项目中做的一些基本的项目优化工作,小小记录一...

14130
来自专栏猛牛哥的博客

API获取窗口滚动条位置

15430
来自专栏程序员宝库

Intellij IDEA神器居然还有这些小技巧

Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜。出于对Intellij IDEA的喜爱,我决定写一个与其相关的专...

20940
来自专栏数据小魔方

如何将html格式动态图表网页嵌入ppt中

前几天魔方学院(其实就是我的公众号交流群啦~_~)的一位群友突然在群里提了一个问题! 看了之前推送的REmap相关内容,结果导出的图表是html格式的动态图,不...

6.5K70
来自专栏mantou大数据

MacOS下SVN迁移Git踩坑记

1. First Blood 之前在Windows环境下进行svn到git的迁移是很简单的,参考官方文档。 可是在macOS环境下(macOS High Si...

57650

扫码关注云+社区

领取腾讯云代金券