zoukankan      html  css  js  c++  java
  • angular pass get paragrams by router

    希望在父组件中点击列表item,根据item不同参数启动不同的子组件component 并传入不同的参数。

    现在实验出两种等价方式

    设置子组件路由app-routing.module.ts

    const routes: Routes = [
      {path: 'envelope', component: EnvelopeComponent },
    ];

    1 父组件

    import { Router } from '@angular/router';
    ......
    
    export class AppComponent {
    
      constructor(
        private router: Router,
        ){}
    
        ......
      onSelectedItem(event){
        console.log('onSelectedItem', event.data)
        //this.uid_selected_from_table = event.data["uid"]
        //成绩详情跳转到别的路由 2种写法,接收时不同
        //this.router.navigate(['/envelope'], {queryParams:event.data})
        this.router.navigate(['/envelope', event.data]);
      }
    
      }
    }

    2子组件  

    import {ActivatedRoute} from '@angular/router';
    .....
    export class EnvelopeComponent implements OnInit {
    
      constructor(private actived_route: ActivatedRoute) {
        // this.actived_route.queryParams.subscribe(d=>{
        this.actived_route.params.subscribe(d=>{
          console.log('参数', d)
        })
    
       }
    }
    —————————————
  • 相关阅读:
    阅读13-17章
    阅读<构建之法>10、11、12章
    作业5.2
    作业5.1
    作业四:构建之法的困惑和思考(5-7)
    做汉堡
    作业三:构建之法的困惑和思考(1-5)
    实验二 合作:王宏财 http://www.cnblogs.com/wanghongcai/
    实验一--四则运算
    数独九宫格
  • 原文地址:https://www.cnblogs.com/xuanmanstein/p/15292139.html
Copyright © 2011-2022 走看看