这次给大家带来怎样使用Angular4的router,使用Angular4的router的注意事项有哪些,下面就是实战案例,一起来看一下。

router,也就是路由,是前端中一个比较重要的概念。通过router把特定的地址和对应的页面关联后分离出来,以达到解耦的目的。在src/app目录下新建一个detail的文件夹,建立一个名为gundam-detail.component的文件。

import { Component } from '@angular/core'; import { Gundam } from '../../model/gundam'; @Component({ template: ` <p *ngIf="selectedGundam"> <span>{{selectedGundam.name}}</span> <span>{{selectedGundam.type}}</span> </p> ` }) export class GundamDetailComponent { selectedGundam: Gundam; }

ps:有关命名,基本上是采用xxx+“-”+“业务类型”+“组件类型”的命名方式,至少官方文档上是这么推荐的。当然给组件起名叫猪头三也可以,但是标准的命名可以增加组件的可读性。即便是不介意随意起名坑后来的维护者,谁也不能确定很长时间以后自己不会再对同一段代码进行重构。所以,做人还是要厚道。不写注释也就算了,起名还是规范一点好。

ps2:有关分包的方式,有的人喜欢把view放一起、controller放一起,再根据逻辑进一步细分;也有人是倒过来,先分逻辑再分view和controller。这个好像没有什么统一的定论,我个人是喜欢后一种,所以本项目采用后一种分法。

目前文件里没什么东西,只是简单的把app.component.ts里的temple给搬过来而已。

先明确需求,再开始写router。

需求:点击gundam列表页面中的任意item,可以跳转到该gundam的详情页。

作为angular的组件,希望在页面中使用router,必须先在app.module.ts里声明。

ps:之前的业务和app.module.ts没什么关系,但这并不是说它不重要。app.module.ts相当于android的mainifist文件,对整个项目进行统筹管理。

打开app.module.ts:

怎样使用Angular4的router

怎样使用Angular4的router

imports:在组件页面里用到基础类。

declarations:现有custom组件声明。

bootstrap:可以理解为Android的main launch,项目启动时从那个组件进入。

需要使用router前先引入:

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

因为要调用RouterModule的forRoot方法,RouterModule.forRoot 又是项目中用到的基础类,所以需要写在imports里。

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

RouterModule.forRoot 接受两个参数,第一个是route数组来表明跳转,第二个参数常年忽略,我也不知道有什么用。

route类包括2个比较关键的属性:path和component,通过访问path,可以找到唯一的component。

在forRoot里添加上包含主页和详情页2个component的route数组。

RouterModule.forRoot([ { path: '', component: AppComponent }, { path: '', component: GundamDetailComponent } ])

app.module.ts现在看起来是这样的:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { AppComponent } from './component/appcomponent/app.component'; import { GundamDetailComponent } from './component/detail/gundam-detail.component'; @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot([ { path: '', component: AppComponent }, { path: '', component: GundamDetailComponent } ]) ], declarations: [ AppComponent, GundamDetailComponent ], bootstrap: [AppComponent], }) export class AppModule {}

2个path都还空着,因为还少一个关键的东西,就算写上也会报错:

怎样使用Angular4的router

Error: Cannot find primary outlet to load ‘AppComponent'

在angular里,router是要搭配标签router-outlet来使用的,换句话说router决定显示哪个组件,而由router-outlet决定显示在哪里。

在app.component.ts里的template加上标签

<router-outlet></router-outlet>

怎样使用Angular4的router

然后不出意外的显示了2个主页:

怎样使用Angular4的router

app.component.ts是一个组件也是一个页面,angular先从bootstrap里进入了app.component.ts渲染了界面(也就是router-outlet上面的部分)。碰到又去找router,发现对应的router也有组件,于是又加载了一遍。

所以为了正常显示,也要把主页也单独抽出来。所有组件通过app.component.ts里的来进行加载。而app.component.ts作为整个demo的最外层容器可以进行一些公共的操作(典型:后退动作)。

在src下新建host包,新建gundam-host.component.ts文件。
基本上可以把整个app挪过来,删除掉out标签,删掉selector(暂时用不到)。

import { Component } from '@angular/core'; import { Gundam } from '../../model/gundam'; import { GUNDAMS } from './../../service/data'; @Component({ template: ` <p *ngFor="let gundam of gundams" (click)="onSelected(gundam)"> <span> {{gundam.name}} </span> </p> ` }) export class GundamHostComponent { gundam: Gundam = { name: '海牛', type: 'NewType' }; gundams = GUNDAMS; selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量 onSelected (gundam: Gundam): void { this.selectedGundam = gundam; // 通过参数赋值 } }

app.component.ts只保留标签,其他一概去掉。

修改app.module.ts文件,导入gundam-host.component.ts并把GundamHostComponent 增加到组件声明declarations里。

修改route里的path所指向的component,默认进入后显示主页组件:

before

怎样使用Angular4的router

after

怎样使用Angular4的router

path的值为”(空字符串)的表示不需要增加子路径。

修改详情页的路径:

{ path: 'detail', component: GundamDetailComponent }

在主页里增加跳转连接:

怎样使用Angular4的router

点击跳转(路径已改变)

怎样使用Angular4的router

现在点击主页的高达列表的item后,可以跳转到一个空白的详情页。之所以是空白,是因为详情页的值是需要由主页进行传递的。现在主页详情页分家以后,需要通过路由来进行值传递。

传值的方法有很多种,甚至可以传的值也有很多种。
目前我先用最笨的方法:将gundam类转化为一个字符串,将字符串传递到详情页面后再转化为gundam类。

在app.component.ts文件的class里添加函数:

parseGundamToString(gundam: Gundam): string { return gundam.name + '&' + gundam.type; } // 将gundam类转化为固定格式的字符串