zoukankan      html  css  js  c++  java
  • Angular路由参数传递

    一、路由时传递参数的方式

    1、在查询参数中传递数据,如

     1 //前台页面
     2 <a routerLink="/product" [queryParams]="{id:1}">商品详情</a>
     3 //后台页面获取参数
     4 export class ProductComponent implements OnInit {
     5   private productId: number;
     6   constructor(private routeInfo: ActivatedRoute) { }
     7   ngOnInit() {
     8     this.productId = this.routeInfo.snapshot.queryParams['id'];
     9   }
    10 }

    相应的后台获取是:ActivedRoute.queryParams[id]

    2、在路由路径中传递数据,

    //前台页面
    <a [routerLink]="['product', 1]">商品详情</a>
    //后台页面,先修改路由定义,app-routing.modules.ts中
    const routes: Routes = [
      {path: 'product/:id', component: ProductComponent},
      {path: '**', component: HomeComponent},
    ];
    this.productId = this.routeInfo.snapshot.params['id'];

    在路由定义时,定义为

    3、在路由配置中传递数据,

    1 //前台页面
    2 <input type="button" value="商品详情" (click)='toProductDetails()' >
    3 //后台页面
    4  toProductDetails() {
    5     this.router.navigate(['/product', 2]);
    6   }
    7 this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);

    二、后台接收路由参数方式

    1、snapshot和subscribe两种,区别在于在路由地址不变的情况下,若参数发送变化后者所接收的参数也会随之变化,前者不变。

    三、路由重定向

    访问一个特定的地址时,会将其重定向到另一个指定的地址

    1 //在定义路由时 
    2  {path: '', redirectTo: '/home', pathMatch: 'full' },
    3  {path: 'home', component : HomeComponent},
  • 相关阅读:
    【转】iOS深入学习(Block全面分析)
    iOS—请求Web Service
    iOS设计模式——MVC
    iOS基础知识
    iOS学习——常用博客
    【转】使用segue页面间传递数据
    【转】storyboard之 prepareForSegue:sender:
    【转】NSDictionary和NSMutableDictionary用法详解
    配置.pch文件
    MKNetworkKit下载图片并显示在UIImageView上
  • 原文地址:https://www.cnblogs.com/molloy-Bonjour/p/7906689.html
Copyright © 2011-2022 走看看