Angular4--路由基础

素颜马尾好姑娘i 2022-06-01 00:23 163阅读 0赞

【背景】

最近在学习Angular，迫不及待的想把学习到的内容跟大家分享。

【内容】

1.实现一个简单的路由

（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.简要介绍路由的五个对象

![Image 1][]![Image 1][]![SouthEast][]

Routes

必备:path,component

这里的path不要加/,为了能够灵活运用绝对路径和相对路径

通配符\*\*，一般放在最后面，作为没匹配到特殊路由的默认路由。

匹配顺序：先匹配者优先

const routes : Routes = [ {path: 'page1',component:Page1Component}, {path: 'page2',component:Page2Component}, ];

RouterLink（指令），用于模板中跳转路由

路由加/,说明是跟路由

路由加./，说明是子路由

input <a routerLink="/dashboard" routerLinkActive="active">仪表盘</a> <a routerLink="/heroes" routerLinkActive="active">英雄列表</a> input type="button" value="英雄列表" （click）="toProductDetails()" > <router-outlet></router-outlet>

注意，锚标签中的\[routerLink\]绑定。我们把RouterLink指令（ROUTER\_DIRECTIVES中的另一个指令）绑定到一个字符串。 它将告诉路由器，当用户点击这个链接时，应该导航到哪里。

Router

在模板中如下写

<a routerLink="/dashboard" routerLinkActive="active">仪表盘</a>    <a routerLink="/heroes" routerLinkActive="active">英雄列表</a>   <input type="button" value="英雄列表" (click)="toProductDetails()"> <router-outlet></router-outlet>

在app.component.ts中如下写

constructor(private router:Router){ } toProductDetails(){ this.router.navigate(['/product']); }

ActivatedRoute

在路由中传递数据时就用到了ActivatedRoute对象

（1）在查询参数中传递数据

/product?id& name=2 => ActivatedRoute.queryParams[id]

（2）在路由路径中传递数据

{path:/product/:id} => /product/1 => ActivatedRoute.params[id]

（3）在路由配置中传递数据

![SouthEast 1][]

3.添加404页面

如果用户输入的url地址不正确，或者输入的地址不存在跳转到指定的路径,使用”\*\*”去匹配，路由会先从上面匹配，如果匹配不成功就会往下匹配

const routes : Routes = [
          {path: 'page1',component:Page1Component},
          {path: 'page2',component:Page2Component},
          {path: '**',component:Page404Component},
        ];

【感受】

以上介绍的内容仅仅是浅显的入门知识，要想深入的学习还是得多敲例子。多读书，多总结。

[Image 1]: 
[SouthEast]: /images/20220601/8be47f5055264cb6b21686f6fb0df2d9.png
[SouthEast 1]: /images/20220601/69bb8765ea9045d8ac8232b6ddcab6c4.png