angular 路由配置

1.路由配置

  • 创建两个组件
  • 在app-routing.modult.ts中配一个空路由
const routes: Routes = [
    {path: '', component: HomeComponent}
];

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

  • 在app.component.html中自动加入
  • link访问路由写法:主页
  • 通过调用方法访问路由的写法

方法在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.数据传递

1.在查询参数中传递数据
  • 路由路径?参数名=参数值
  • /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}]}
  • 修改路由链接,让链接在跳转时携带参数。
  • url获取参数

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"}
  • 导航时指定在路由到某个地址时,辅助路由上需要显示哪个组件。
开始

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

你可能感兴趣的:(angular 路由配置)