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"];
      }
  • 相关阅读:
    全面了解 NOSQL
    金融业容灾技术分析
    银行业务知识(转)
    结合工作的业务连续性实践
    金融企业架构
    window 下拉取github项目失败 (Permission denied (publickey))
    vsftpd 配置文件
    nginx下配置虚拟主机
    linux 下安装ftp 并远程连接
    find_in_set
  • 原文地址:https://www.cnblogs.com/chenyishi/p/8903110.html
Copyright © 2011-2022 走看看