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"];
      }
  • 相关阅读:
    推荐一个SAM文件中flag含义解释工具--转载
    字节码技术
    Jconsole工具检测堆内存变化的使用
    观察者模式
    装饰器模式(IO流案例)
    JVM垃圾收集器
    内存溢出与内存泄漏区别
    栈溢出
    内存溢出
    JVM参数调优
  • 原文地址:https://www.cnblogs.com/chenyishi/p/8903110.html
Copyright © 2011-2022 走看看