【Angular】路由基础、路由传递数据

前言

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。

路由相关对象

名称	简介
Routes	路由配置，保存着那个URL对象展示那个组件，以及在那个RouterOutlet中展示组件
RoutesOutlet	在Html中标记路由内容呈现位置的展位符指令
Router	负责在运行时执行路由的对象，可以通过调用其navigate()和navigatebyUrl()方法来导航到一个指定的路由
RouterLink	在Html中声明路由导航用的指令
ActivatedRoute	当前激活的路由对象，保持着当前路由的信息，如路由地址，路由参数等

创建路由

1.ng new router -routing
2.app-routing.module.ts中会引入 AppRoutingModule { }模块，在app-routing.module.ts中配置路由，里边是一组路由对象，最少有路径和组件构成，这是导航到某一路径上，就会显示相应的组件

3.app.compoent.html中会有路由插坐 <.router-outlet><./router-outlet>,组件内容显示在路由插座后
4.在app.component.html里指定路由导航的指令（导航路由）

通过链接导航：
<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',1]" [queryParams]="{id:1}">商品详细</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>

通过在后台router掉方法传递：（前端只需要调toProductDetails()方法就可以）

当用户输入不存在的路由地址

当路径输入错误，输入不存在的路由地址，网页将什么也不验收，控制台会报错，这时候需要通配符**
1.首先生成一个组件ng g component code404,只要地址不存在就显示这个组件，在当前组件的前台输入页面不存在

2.在路由里添加一个新的配置，通配符路由。

子路由

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>
<router-outlet></router-outlet>

app-routing:

const routes: Routes = [
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'home',component: HomeComponent},
  {path:'product/:id',component:ProductComponent,children:[
   {path:'',component:ProductDescComponent},
   {path:'seller/:id',component:SellerInfoComponent },
  ]}, 
  {path:'**',component:Code404Component},
];

在路由时传递数据3种

• 在查询参数中传递数据
  
  在商品组件的后端查询ActivatedRoute.queryParamsd的参数
  
  通过差值表达式，显示在商品组件的页面上
  
• 在Url中传递数据
  1.修改路由配置中的path属性，使其可以携带参数
  2.修改路由链接的参数
  
  3.在商品组件后端取值，这是拿到了从uml拿到了id
  
• 在路由配置中传递参数