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

    第一种:
    <a [routerLink]="['/product']" [queryParams]="{id: 1}">商品详情</a>
    第一种接收参数:
    export class ProductComponent implements OnInit { 

      private productId: number;
      constructor(
    private routeInfo: ActivatedRoute) {
       }
      ngOnInit() {
        this.productId = this.routeInfo.snapshot.queryParams["id"];
      }
    }


    <p> product works! </p>
    商品Id{{productId}}
    第二种:
    const routes: Routes = [
      {
        path:'',
        component: HomeComponent
      },
      {
        path: 'product/:id',
        component: ProductComponent
      }
      ,
      {
        path: '**',
        component: Code404Component
      }
    ];
    <a [routerLink]="['/product',1]">商品详情</a>
    第二种接收参数:
    export class ProductComponent implements OnInit {
    
      private productId: number;
    
      constructor(private routeInfo: ActivatedRoute) { }
    
      ngOnInit() {
        this.productId = this.routeInfo.snapshot.params["id"];
      }
    
    }

    参数订阅:

      ngOnInit() {
        this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]);
        //this.productId = this.routeInfo.snapshot.params["id"];
      }

    参数快照:

      ngOnInit() {
        //this.routeInfo.params.subscribe((params: Params)=> this.productId=params["id"]);
        this.productId = this.routeInfo.snapshot.params["id"];
      }
  • 相关阅读:
    EZOJ #202
    EZOJ #201
    p5156 [USACO18DEC]Sort It Out
    p4363 [九省联考2018]一双木棋chess
    p2150 [NOI2015]寿司晚宴
    p5155 [USACO18DEC]Balance Beam
    p2414 [NOI2011]阿狸的打字机
    实验室断网的解决方案
    人需要看到未来
    门德尔松--罗辑思维
  • 原文地址:https://www.cnblogs.com/chenyishi/p/8903110.html
Copyright © 2011-2022 走看看