angularjs4+(10)动态路由配置及传值

1 接上一节,还记得有个

{path: ‘newscontent/:id’, component: NewscontentComponent},
那么,newscontent组件如何获取路由传递过来的id呢,上代码(newscontent.component.ts):

import { Component, OnInit } from '@angular/core';
import {Router,ActivatedRoute,NavigationExtras} from '@angular/router';
@Component({
  selector: 'app-newscontent',
  templateUrl: './newscontent.component.html',
  styleUrls: ['./newscontent.component.css']
})
export class NewscontentComponent implements OnInit {

  constructor(private route:ActivatedRoute,private router:Router) { }

  ngOnInit() {
    //获取总路由传过来的id值
    console.log(this.route.params);

  }

  goNews(){
    // 不带参数从newscontent组件跳转到news组件
    this.router.navigate(['/news']);
  }

  goNewsWithParam()
  {
    //get传参
    let navigationExtras:NavigationExtras = {
      queryParams:{
        'sid':'123'
      },
      fragment:'anchor'
    };

    this.router.navigate(['/news'],navigationExtras);
    }


}

2 带参数从newscontent组件跳转到news组件后,news组件怎么接收参数呢,上代码news.component.ts:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

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


  constructor(private route: ActivatedRoute) {
    console.log(this.route.queryParams);
    }
  ngOnInit() {
  }

}

3 总结:ActivatedRoute组件用来接收参数,Router组件用来跳转

发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>