angular 路由配置

1.路由配置

• 创建两个组件
• 在app-routing.modult.ts中配一个空路由

const routes: Routes = [
    {path: '', component: HomeComponent}
];

在做路由配置时path属性不要用’/'开头，因为angular本身会根据path的值做相应的解析生成url。

• 在app.component.html中自动加入<router-outlet></router-outlet>
• link访问路由写法：<a [routerLink]="['/']">主页</a>
• 通过调用方法访问路由的写法

<input type="button" value="我是详情" (click)="toStockDetail()">

方法在app.component.ts中声明：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private router: Router){
        
  }
  toStockDetail(){
    this.router.navigate(['/stock']);
  }
}

• 当用户访问的路由不存在时，页面出错，可以通过配置通配符解决问题。
  创建一个新的组件，在路由配置中加{path: '**', component: Code404Component}

通配符写在整个路由配置的最后面。

2.数据传递

１．在查询参数中传递数据

• 路由路径？参数名=参数值
• /product?id=1&name=2 => ActivatedRoute.queryParams[id]

2.在路由路径中传递数据

• 指定路由路径加参数名=>在实际路径中携带的参数=>调用
• {path:/product/:id}=>/product/1=>ActivatedRoute.params[id]

3.在路由配置中传递数据

• 通过data参数定义静态数据，data本身为数组
• {path: /product, component: ProductComponent, data:[{isProd:true}]}=>ActivatedRoute.data[0][isProd]

4.在url中传递参数

• 修改路由配置中的path属性，使其可以携带参数。
• {path: 'stock/:id', component: ProductComponent, data:[{isPro:true}]}
• 修改路由链接，让链接在跳转时携带参数。
• <a [routerLink]= "['/stock',1]" >url获取参数</a>

3.参数快照与参数订阅

• 参数快照：传参方式与前面记录相同。当从主页跳转到详情页时，详情页组件被创建，调用ngOnInit()方法，但是，当详情页跳转到详情页时（两个传参不同），组件不会被重新创建，ngOnInit()方法在同一组件路由到自身时不会被调用。

this.id = this.routerInfo.snapshot.params["id"]

• 参数订阅：订阅方式改变参数值时，每当路由参数变换时，匿名的方法都会被调用一次。

this.routerInfo.params.subscribe((params:Params)=>this.id = params["id"])

4.重定向路由

{path: '', redirectTo: '/home',pathMatch:'full'}

pathMatch:'full'表示只有访问路径是精准的空字符串时才跳转到/home上。

{path: 'xx', redirectTo: '/home',pathMatch:'prefix'}

pathMatch:'prefix'表示路径是以“xx”开头就可跳转到/home上。

5.子路由

在原有路由的基础上加children属性。将router-outlet声明在哪个子路由就会显示在哪儿。由于声明的是子路由，在访问子路由时是不能以“/”开头的，“/”开头代表在主路由中找，子路由以“./”开头。

• 子路由可以一直嵌套
• 路由信息和组件是分离的

{path: 'stock', component: StockComponent,
    children:[
      {path: '', component:BuyerListComponent},
      {path: 'seller/:id', component:SellerListComponent}
    ] 
 }

6.辅助路由

在每个页面都有的一些侧边导航，会用到辅助路由。

• 在组件模板上除了外，还需要声明一个带name属性的
• 在路由配置中去配置aux可以显示哪些组件。

{path: 'consult', component: ConsultComponent,outlet:"aux"}

• 导航时指定在路由到某个地址时，辅助路由上需要显示哪个组件。

<a [routerLink]="[{outlets: {aux: 'consult'}}]">开始</a><br>

说明：主路由的内容也可以控制，主路由没有设置名字，它有一个默认的关键字——primary，在aux前面加上primary:'home'，然后点击，主路由跳转到home。