zoukankan      html  css  js  c++  java
  • angular 路由

    在路由时传递数据

    1. 在查询参数中传递数据

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

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

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

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

    {path:/product, component: ProductComponent, data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

     重定向路由

    const routes:Routes = [
        {path: '', redirectTo: '/home', pathMatch: 'full'}   
    ]

    子路由<router-outlet></router-outlet>

    {path:'home',component:HomeComponent,
        children:[
          {path:'',component:XxxComponent},
          {path:'/yyy', component:YyyComponent}
      ]
    }

    辅助路由

    <router-outlet></router-outlet>
    <router-outlet name="aux"></router-outlet>
    {path: 'xxx',component:XxxComponent,outlet:'aux'}
    {path: 'yyy',component:YyyComponent,outlet:'aux'}
    <a [routerLink]="['/home',{outlets:{aux:'xxx'}}]">Xxx</a>
    <a [routerLink]="['/product',{outlets:{aux:'yyy'}}]">Yyy</a>

    路由守卫

    CanActivate:处理导航到某路由的情况
    CanDeactivate:处理从当前路由离开的情况
    Resolve:在路由激活之前获取路由数据
  • 相关阅读:
    每日日报2020.12.1
    每日日报2020.11.30
    981. Time Based Key-Value Store
    1146. Snapshot Array
    565. Array Nesting
    79. Word Search
    43. Multiply Strings
    Largest value of the expression
    1014. Best Sightseeing Pair
    562. Longest Line of Consecutive One in Matrix
  • 原文地址:https://www.cnblogs.com/leiting/p/8384947.html
Copyright © 2011-2022 走看看