ionic升华过程4-angularjs2路由

一。路由简介

在angularjs2中，路径路由表示当访问某个路径时显示某个控件的页面比如访问 /heros 显示英雄列表，/herodetail/{{id}}显示
某个英雄的详细，并编辑。/dashboard表示英雄仪表盘显示前4个英雄

具体参考：https://angular.io/tutorial/toh-pt5

二。英雄之路路由案例

应用实现描述：首页默认进行仪表盘，点击仪表盘进入仪表盘，点击英雄列表进入列表，点击列表中或者仪表盘的英雄编辑具体英雄，英雄编辑页面返回跳转到之前的页面
1》生成路由模块

ng generate module app-routing  --flat --module=app
--flat 生成文件在 in src/app 不生成子目录
--module=app 将模块自动添加到 AppModule的imports数组中

生成的ts代码为

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

如果需要添加路由功能，文件app-routing.module.ts 需要引用 @angular/router模块并且NgModule中导出让其他模块可以使用它的指令等

import { RouterModule, Routes } from '@angular/router';
@NgModule({
  exports: [ RouterModule ]
})

添加一个全局变量用于配置路由

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent } 
];
path表示访问 路径为 /heroes 显示HeroesComponent 的内容
 比如 访问  http://localhost:4200/heroes

并且在app-routing.module.js中导入该数组（RouterModule.forRoot(routes)转换成模块）

imports: [ RouterModule.forRoot(routes) ],

将 app.component.html中的<app-heroes></app-heroes>换成以下标签

<router-outlet></router-outlet>
该标签式路由显示的标签

尝试使用 ng serve启动访问 http://localhost:4200/ 为空白 http://localhost:4200/heroes显示英雄列表

接下来在app.component.html添加超链接来点击而不是每次都在浏览器上输入路径

<a routerLink="/heroes">英雄列表</a>

首页点击英雄列表出现了英雄列表

接下来添加英雄仪表盘的控件

ng generate component dashboard

添加新的路由地址

{ path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent }

HeroService添加一个新的方法用于查询前几条数据

  getTopHeroes():Hero[]{
    return this.heros.slice(1,5);
  }

dashboard.component.css中调用service获取数据

import { Component, OnInit } from '@angular/core';
import {HeroService} from '../hero.service'
import { Hero } from '../heroes/hero';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private  h:HeroService) { }
  topHeros:Hero[];
  ngOnInit() {
    this.topHeros=this.h.getTopHeroes();
  }

}

dashboard的html中添加循环展示

<br/>
<span *ngFor="let h of topHeros" class="s">
<a>{{h.name}}</a>
</span>

添加个简单样式

.s{
    width: 60px;;
    height:60px;
    border:1px solid red;
    display:inline-block; 
    text-align: center;
    vertical-align: middle;  
}

最终效果如下
点击英雄仪表盘如下

点击英雄列表

2》点击英雄名称进入详细页面 /detail/{{id}}

生成详情页的控件

ng generate component herodetail

将详情和编辑之前 app.components.html的 ngIf删除添加到herodetail.component.html中

<h2>英雄：{{selectedHero.name}} 详细</h2>
    <div><span>编号: </span>{{selectedHero.id}}</div>
    <div><span>姓名: </span>{{selectedHero.name|uppercase}}</div>
    <div>
      <label>name:
        <input [(ngModel)]="selectedHero.name" placeholder="name">
      </label>
    </div>

因为详情页是跳转过来的所以应带带上之前跳转过来的id 我们可以再控制层通过id来获取英雄

import { Component, OnInit } from '@angular/core';
import { Hero } from '../heroes/hero';
import { HeroService } from '../hero.service';
import { ActivatedRoute } from '@angular/router';//可以获取路径参数

@Component({
  selector: 'app-herodetail',
  templateUrl: './herodetail.component.html',
  styleUrls: ['./herodetail.component.css']
})
export class HerodetailComponent implements OnInit {

  selectedHero:Hero;
  constructor(
    private route: ActivatedRoute,
    private heroService:HeroService) { }

  ngOnInit() {
    let id:number=parseInt(this.route.snapshot.paramMap.get("id"));//获取路径上的id /a/1获取1
    this.selectedHero=this.heroService.getHeroById(id);//通过id查询英雄
  }

}

修改HeroService添加通过id查询英雄的方法

 getHeroById(id:number):Hero{
    return this.heros.find(hero=>id==hero.id);
  }

修改路由表(app-routing.module.ts) 指定 /detal/:id跳转到新增的herodetail控件中

  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HerodetailComponent }

修改英雄之路和仪表盘点击英雄跳转到这个路径
仪表盘的html模板

<br/>
<span *ngFor="let h of topHeros" class="s">
        <a routerLink="/detail/{{h.id}}">{{h.name}}</a>
</span>

英雄列表

<h2>所有英雄</h2>
<ul>
  <!--
        *ngFor="let hero of heros" 表示循环模型 heros数组 循环一次到临时变量hero中下面就可以hero.属性了
        class.样式表=“满足什么条件就会自动添加该样式表”
        (click)="onSelect(hero)" 表示点击时触发事件 事件全部定义在控件中 选中了就将当前的hero赋值给 selectedHero对象

  -->
  <li *ngFor="let hero of heros"
    [class.selected]="hero==selectedHero"
   >
    <span class="badge">{{hero.id}}</span> <a routerLink="/detail/{{hero.id}}">{{hero.name}}</a>
  </li>
</ul>

显示效果

3》详情页返回

在英雄详情页添加返回超链接触发点击事件

<a (click)="clickReturn()">返回</a>

ts中添加方法引入 Location服务

import { Location } from '@angular/common';
  clickReturn(){
    this.loc.back();
  }

返回效果如下

ionic升华过程4-angularjs2路由

猜你喜欢