zoukankan      html  css  js  c++  java
  • angular2的get路由传值

    路由配置页

     

     html页  get的路由跳转传值

    <p>news works!</p>
    <ng-container *ngFor="let item of list;let key=index" > 
    <a [routerLink]="['./work']" [queryParams]="{aid:key,name:'张三'}">name{{key}}--->{{item}}</a>
    <button (click)="goWork(key)">跳转</button>
    <br>
    </ng-container>
     
    get 的js路由跳转传值
     
    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';

    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.css']
    })
    export class NewsComponent implements OnInit {

      constructor(private router: Router) { }

      ngOnInit() {
        for (let i = 0; i < 10; i++) {
          this.list.push("这是第" + i + "条数据");
        }
      }
      list: Array<string> = [];

      // goWork(id:string){
      //   this.router.navigate(['/work',id]);
      // }
      data:any={
       queryParams:{
        name:'zhangsan',
        aid:20,
       } 
      }
      goWork(){
        this.router.navigate(['/work'],this.data);

      }

    }
     
    获得路由所传的值
     
    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    @Component({
      selector: 'app-work',
      templateUrl: './work.component.html',
      styleUrls: ['./work.component.css']
    })
    export class WorkComponent implements OnInit {

      constructor(private route: ActivatedRoute) { }

      ngOnInit() {
     
        this.route.queryParams.subscribe(data=>{
          console.log(data);
          console.log(data.aid+"###"+data.name);
        })
      }

    }
  • 相关阅读:
    数据库 封装类CppSQLite3的helloword VC6
    数据库 sqlite 进阶
    数据库 sqlite3_get_table,sqlite3_free_table
    数据库 sqlite3_open,sqlite3_exec,slite3_close
    数据库 SQLite C++ 接口
    数据库 如何在VC6下使用sqlite3
    MFC CButtonST使用技巧(一)(二)(三)
    MFC CButtonST简介
    MFC CButtonST 在你的程序中如何使用CButtonST类
    MFC静态分割后锁定分隔条/限制分隔条的移动范围 方法1
  • 原文地址:https://www.cnblogs.com/kukai/p/12163825.html
Copyright © 2011-2022 走看看