记录angular：router的使用

1. 在app-routing-module.ts

• 引入 components文件
• 写routes[{path:“name”,component: importName}]

get传值

• 声明ActivatedRoute

constructor(public route: ActivatedRoute) {}

跳转通过

接收通过this.route.queryParams.subscribe(res=>console.log(res))

import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { ProductComponent } from './components/product/product.component';
import { NewContentComponent } from './components/new-content/new-content.component';const routes: Routes = [{path: 'home',component: HomeComponent,},{path: 'news',component: NewsComponent,},{path: 'newscontent',component: NewContentComponent,},{path: 'product',component: ProductComponent,},{path: '**',redirectTo: 'home',},
];

2. app.components.html

<header class="header"><a [routerLink]="['/home']" routerLinkActive="active">首页a><a [routerLink]="['/news']" routerLinkActive="active">新闻a><a [routerLink]="['/product']" routerLinkActive="active">商品a>
header>

3. 路由传参 news.html 传参给newscontent.html

<ul><li *ngFor="let item of list; let key = index">{ key }}---{{ item }} --><a [routerLink]="['/newscontent']" [queryParams]="{ id: key }">{{ key }}---{{ item }}a>li>
ul>

4. new-content.components.ts

• 导入angular路由
  import { ActivatedRoute } from '@angular/router'

• 声明ActivatedRoute
constructor(public route: ActivatedRoute) {}

• 通过subscribe 拿到上个页面传过来的值

ngOnInit(): void {console.log(this.route.queryParams);this.route.queryParams.subscribe((data) => {console.log(data);});}

动态路由传值

路由/:key

跳转通过

接收通过this.route.params.subscribe(res=>console.log(res))

1. app-routing.module.ts 修改path

 {path: 'newscontent/:id',component: NewContentComponent,},

2. new.html

<ul><li *ngFor="let item of list; let key = index"><a [routerLink]="['/newscontent', key]">{{ key }}--{{ item }}a>li>
ul>

3.new-content.ts 接收

 this.route.params.subscribe((data) => {console.log(data);});

js跳转路由

import { NewContentComponent } from './components/new-content/new-content.component';{path: 'newscontent/:id',component: NewContentComponent,},import { Router } from '@angular/router';constructor(public router: Router) {}this.router.navigate(['/newscontent/', '123']);

js get跳转

关键：导入NavigationExtras

import { Router, NavigationExtras } from '@angular/router';getNews() {let queryparams: NavigationExtras = {queryParams: {id: 11,},};this.router.navigate(['/news'], queryparams);}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！