Angular学习之旅-----get传值 路由跳转

新建shoplist组件

在app-routing.module.ts中配置路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 引入组件
import { HomeComponent } from './components/home/home.component'
import { NewsComponent } from './components/news/news.component'
import { NewscontentComponent } from './components/newscontent/newscontent.component'
import { UserComponent } from './components/user/user.component'
import { ShoplistComponent } from './components/shoplist/shoplist.component'
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
  { path: 'newscontent/:aid',   /*配置动态路由*/ component: NewscontentComponent },
  { path: 'user', component: UserComponent },
  { path: 'shoplist', component: ShoplistComponent },
  // 设置默认路由
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  // 匹配不到任意路由的时候，加载home
  { path: '**', redirectTo: 'home' }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

//引入ActivatedRoute这个模块 ActivatedRoute 接受get传值，接受动态传值

import { ActivatedRoute } from "@angular/router"

constructor(private router: ActivatedRoute) { }

import { Component, OnInit } from '@angular/core';
//引入ActivatedRoute这个模块  ActivatedRoute 接受get传值，接受动态传值
import { ActivatedRoute } from "@angular/router"
@Component({
  selector: 'app-shoplist',
  templateUrl: './shoplist.component.html',
  styleUrls: ['./shoplist.component.css']
})
export class ShoplistComponent implements OnInit {

  constructor(private router: ActivatedRoute) { }

  ngOnInit() {
    // this.route.params/*获取动态路由*/
    // this.route.queryParams  /*获取get传值*/
    console.log(this.router.queryParams);
    this.router.queryParams.subscribe(function (data) {
      console.log(data)
    })
  }

}

// 1 引入 NavigationExtras get传参用

import { Router, NavigationExtras } from '@angular/router'

// 2 申明

constructor(private router: Router) { }

  goShop(aid,id) {
    //跳转路由get传值
    let navigationExtras: NavigationExtras = {
      queryParams: { 'aid': aid, "id": id }
      // queryParams: { 'aid': '123', "id": '123' }
      // fragment: 'anchor'   //锚点    参考官方文档
    };

    //配置参数
    this.router.navigate(['/shoplist'], navigationExtras);
  }

import { Component, OnInit } from '@angular/core';
// 1 引入  NavigationExtras  get传参用
import { Router, NavigationExtras } from '@angular/router'
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // 2 申明
  constructor(private router: Router) { }

  ngOnInit() {
  }
  goNews() {
    // alert('go')
    // js跳转，他有第二个参数，1也就是跳转到/news/1
    this.router.navigate(['/news', '1'])
  }
  goShop(aid,id) {
    //跳转路由get传值
    let navigationExtras: NavigationExtras = {
      queryParams: { 'aid': aid, "id": id }
      // queryParams: { 'aid': '123', "id": '123' }
      // fragment: 'anchor'   //锚点    参考官方文档
    };

    //配置参数
    this.router.navigate(['/shoplist'], navigationExtras);
  }
}

<div>
  Home组件
  <button (click)="goNews()">js跳转新闻</button>
  <a routerLink="/shoplist" routerLinkActive="active">去商品类别页面</a>
  <hr>
  <button (click)="goShop(11,3)">get传值1</button>
  <button (click)="goShop(12,3)">get传值2</button>
  <button (click)="goShop(13,3)">get传值3</button>
</div>