新建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>