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