今天完成的事情：今天详细学习了一下angular的路由内容
明天计划的事情：继续后续的学习
遇到的问题：实际操作起来还是太难需要更多的理解
收获：.应用的开始都会有一个根目录开始，路由也一样，所以使用路由就在index.html的<head>标签下先添加一个<base>元素，来告诉路由器该如何合成导航用的URL。
2.在app.module.ts文件中导入需要的路由模块，记得把路由的组件也要导入进来。
import { RouterModule ,Routes } from '@angular/router';
3.配置路由
在@ngModule()上边创建路由数组
//path 路径参数(不能以/开头，路由会自己添加)，component是组件（也就是你要导航的目的页面）redirectTo：重定向 pathMath: 来告诉路由器如何用
URL去匹配路由的路径，** 通配符，当前面所有的路由都找不到的时候就会路由到这个组件
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'hero/:id', component: HeroDetailComponent },//带参数的路由
{
path: ' ', redirectTo: ' ', pathMath: ‘full'}，
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes
)
]
})
4.在组件中创建路由出口
在需要路由的HTML页面，留下路由出口。例如app.component.html
<router-outlet></router-outlet>
5.路由链接（也就是点击跳转）。例如在app.component.html中
<h1>Angular Router</h1>
<nav>
<a routerLink="/home" routerLinkActive="active">Crisis Center</a>
</nav>
<router-outlet></router-outlet>
这样就完成了一个简单的页面路由。
路由配置
const routes: Routes = [
//默认初始显示页面，重定向路由，重定向redirectTo到demo页面
{ path: '', redirectTo: '/demo', pathMatch: 'full' },
//辅助路由,extraName是路由插座的名字，自己定义
{ path: 'extra', component: ExtraComponent, outlet: 'extraName' }
//不带参数路径,子路由
{
path: 'demo', component: DemoComponent,
children: [
{ path: 'child-one', component: ChileOneComponent },
{ path: 'child-two', component: ChileTwoComponent },
// 子业务模块路由，子模块具体路由path存在在子模块的routing中
{ path: 'sys', loadChildren: './sys/sys.module#SysModule' }
]
},
//不带参数路径
{ path: 'demo1', component: Demo1Component },
//带参数路径，id为参数
{ path: 'demo2/:id', component: Demo2Component },
//通配符路由，页面不存在路由
{ path: '**', component: 404Component }
];
路由占位符
< !--在html中控制组件显示的位置-->
<router-outlet></router-outlet>
<!--辅助路由插座-->
<router-outlet name="extraName"></router-outlet>
执行路由对象
//在ts执行路由导航，使用navigate()方法
import { Router } from '@angular/router';
...
constructor(private router: Router){ }
...
this.router.navigate(['/demo']);
返回上级路由
import { Location } from '@angular/common';
...
constructor(private location: Location){ }
...
this.location.back();
RouterLink | html中声明路由导航
<!--辅助路由显示-->
<a [routerLink]="[{ outlets: { extraName: 'extra'} }]">打开辅助路由</a>
<a [routerLink]="[{ outlets: { primary：'demo',extraName: 'extra'} }]">打开辅助路由,同时显示demo主界面</a>
<a [routerLink]="[{ outlets: { extraName: 'extra'} }]">关闭辅助路由</a>
<!--不传参数路由-->
<a routerLink="/demo" routerLinkActive="active">组件A</a>
<a [routerLink]="/demo">组件A</a>
<!--不带参数的路径，通过queryParams传递参数-->
<a [routerLink]="['/demo1']" [queryParams]="{id: 001}">组件A1</a>
<!--带参数的路径，直接传递参数-->
<a [routerLink]="['/demo2',002]">组件A1</a>
在组件页面接收路由传递的参数
<script>
import { ActivatedRoute } from '@angular/router';
...
constructor(private route: ActivatedRoute){ }
...
//不带参数路径获取传递的参数，下面两种方法均可获取传递的id
let id1 = this.route.snapshot.queryParams['id'];
let id1 = this.route.snapshot.queryParamMap.get('id');
//带参数路径获取传递的参数，下面两种方法均可获取传递的id
let id2 = this.route.snapshot.paramMap.get('id');
let id2 = this.route.snapshot.params['id'];
不太明白的地方明天再继续进行
返回列表
评论