angular4路由设置笔记

场景说明：angular4开发的一个后台项目

1、能够使用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 { }

2、手动配置路由文件

在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”