路由传值
- Get传值
- 动态路由传值

路由传值

Get传值

在news组件中，新建一个list数组，并存入若干值；
编辑news的html模板 ```html
- {{key}}—{{item}}

{{key}}—{{item}}


3. 
在newscontent组件中接收传入的aid和name的值
```typescript
import { Component, OnInit } from '@angular/core';
// 引入ActivateRoute
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-newscontent',
  templateUrl: './newscontent.component.html',
  styleUrls: ['./newscontent.component.less']
})
export class NewscontentComponent implements OnInit {
    // 注入activeRoute
  constructor(public activeRoute:ActivatedRoute) { }
  ngOnInit(): void {
      // 通过activeRoute的queryParams获取到传入的值，值为对象格式
    this.activeRoute.queryParams.subscribe((data) => {
      console.log(data.aid + "===" + data.name);
    });
  }
}

动态路由传值

如果在路由上配置了动态路由传值，但是在html的a标签上未给对应的routeLink实际传值，就跳转不到该路由

在路由中配置需要传入的参数 ```typescript 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 { ProductComponent } from ‘./components/product/product.component’; import { NewscontentComponent } from ‘./components/newscontent/newscontent.component’;

const routes: Routes = [ { path: ‘home’, component: HomeComponent }, { path: ‘news’, component: NewsComponent }, { path: ‘newscontent/:sid/:name’, // 设置跳转该组件时需要传入sid和name component: NewscontentComponent }, { path: ‘product’, component: ProductComponent }, { path: ‘**’, redirectTo: ‘home’ } ];

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


2. 
配置news组件的html
```html
<ul>
    <!-- 直接在routerLink中使用动态路由传值 -->
    <li *ngFor="let item of list; let key=index;">
        <a [routerLink]="[ '/newscontent', key, item ]">
            {{key}}---{{item}}
        </a>
    </li>
</ul>

在newscontent组件中接收传入的参数 ```typescript import { Component, OnInit } from ‘@angular/core’;

// 引入ActivateRoute import { ActivatedRoute } from ‘@angular/router’;

@Component({ selector: ‘app-newscontent’, templateUrl: ‘./newscontent.component.html’, styleUrls: [‘./newscontent.component.less’] }) export class NewscontentComponent implements OnInit {

// 注入activateRoute constructor(public activateRoute:ActivatedRoute) { }

ngOnInit(): void { // 通过activateRoute的params获取动态路由传入的参数，值为对象类型 // this.activateRoute.snapshot.paramMap.get(‘id’) 获取一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。paramMap是一个从URL中提取的路由参数值的字典 this.activateRoute.params.subscribe((data) => { console.log(data.sid + “====” + data.name); }); } }

返回上一页

```typescript import { Component, OnInit } from ‘@angular/core’;

import { ActivatedRoute } from ‘@angular/router’;

// 引入Location import { Location } from ‘@angular/common’;

@Component({ selector: ‘app-newscontent’, templateUrl: ‘./newscontent.component.html’, styleUrls: [‘./newscontent.component.less’] }) export class NewscontentComponent implements OnInit {

  // 注入location
 constructor(private activateRoute:ActivatedRoute, private location:Location) { }
 ngOnInit(): void {
   this.activateRoute.params.subscribe((data) => {
     console.log(data.sid + "====" + data.name);
   });
 }
   // 返回上一页
 goBack(): void {
     this.location.back();
 }

}


<a name="e76ef96c"></a>
## 在JS中进行动态路由传值
1. 
在html中配置两个按钮，跳转至newscontent组件和home组件
```html
<button (click)="goNewsContent()">js路由跳转新闻详情</button>
<button (click)='goHome()'>js跳转到首页</button>

在对应的组件typescript中实现这两个方法，需要引入Router ```typescript import { Component, OnInit } from ‘@angular/core’;

// 引入Router import { Router } from ‘@angular/router’;

@Component({ selector: ‘app-product’, templateUrl: ‘./product.component.html’, styleUrls: [‘./product.component.less’] }) export class ProductComponent implements OnInit {

// 注入router

constructor(public router:Router) { }

ngOnInit(): void { }

// router的navigate方法进行动态路由跳转传值

goProductContent() { console.log(‘goProductContent’); this.router.navigate([“/newscontent”, ‘1’, ‘这是第1个新闻’]); }

 // router的navigate方法进行动态路由跳转

goHome() { this.router.navigate([‘/home’]); } }


<a name="92b38d31"></a>
## 在js中进行get跳转传值
1. 
在html中定义按钮
```html
<button (click)='goNews()'>js进行get传值跳转</button>

在对应的组件typescript实现该方法，需要引入Router、NavigationExtras（非必需） ```typescript import { Component, OnInit } from ‘@angular/core’;

// 引入Router、NavigationExtras import { Router,NavigationExtras } from ‘@angular/router’;

@Component({ selector: ‘app-product’, templateUrl: ‘./product.component.html’, styleUrls: [‘./product.component.less’] }) export class ProductComponent implements OnInit {

// 注入Router

constructor(public router:Router) { }

goNews() { // 定义需要传入的值（类型非必需限制） let queryParams:NavigationExtras = { queryParams:{ aid: ‘1’, name: ‘这是第1条新闻’ } }

// 使用get方法进行传值跳转
this.router.navigate(['/news'], queryParams);

} } ```

前端笔记

16-路由传值

路由传值

Get传值

动态路由传值