Angular 路由传参 组件接受参数

  • LInk 跳转
    GET路由
    跳转到新闻详情 
    {{key}}--{{item}}
    //这里可以传入多个参数GET参数
    动态路由 
    {{key}}---{{item}}
  • js
  • GET路由发送
  import { Router} from '@angular/router'
  constructor(public router:Router) { }
  this.router.navigate(['/home']);
  this.router.navigate(['/news'],{
          queryParams:{
            id:123
          }
       });
     /news'?id=3

-动态路由发送

  this.router.navigate(['/newscontent/','1243'])
  /newscontent/1234

模块解析参数
get路由解析参数

 import { ActivatedRoute } from '@angular/router';

        constructor(public route:ActivatedRoute) { }

      this.route.queryParams.subscribe((data)=>{

            console.log(data);
      })

-动态路由解析参数

import { ActivatedRoute } from '@angular/router

        constructor(public route:ActivatedRoute) { }

        this.route.params.subscribe((data)=>{

              console.log(data);
        })

你可能感兴趣的:(Angular)