场景说明:angular4开发的一个后台项目
一、可以使用angular-cli
创建一个带路由的项目,ng new 项目名称 --routing
会多创建一个app-routing.module.ts
文件代码如下:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [
{
path: '',
children: []
}
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
二、手动配置路由文件
在app
文件夹下面创建一个app.router.ts
文件,基本结构代码如下:
angular路由中涉及到很多新单词词汇
单词 | 说明 | 使用场景 |
---|---|---|
Routes | 配置路由,保存URL对应的组件,以及在哪个RouterOutlet中展现 | |
RouterOutlet | 在html中标记挂载路由的占位容器 | |
Router | 在ts文件中负责跳转路由操作 | Router.navigate([“/xxx”]),Router.navigateByUrl(“/xxx”) |
routerLink | 在html中使用页面跳转 | <a [routerLink]="['/xx']" |
routerLinkActive | 表示当前激活路由的样式 | routerLinkActive=”active” |
ActivedRoute | 获取当前激活路由的参数, | 这个是一个类,要实例化,使用实例化后的对象.params,xx.queryParams |
redirectTo | 重定向 | redirectTo=”/路径” |
useHash | 使用哈希值展现 | {useHash:true} |
pathMatch | 完全匹配 | pathMatch:”full” |