Angular入门教程 | 07Angular路由跳转传值路由跳转在项目创建时，我们勾选路由选项，这样在项目创建好之后

路由跳转

在项目创建时，我们勾选路由选项，这样在项目创建好之后就会有路由配置文件app-routing.module.ts，我们现在app.module.ts里面引入路由模块，并且进行配置

import { AppRoutingModule } from './app-routing.module';
imports: [
  AppRoutingModule
]

并且在你需要进行路由跳转的页面(这里我们在根组件页面)app.component.html中，来放置占位符,并且通过a链接的routerLink来进行跳转。其中RouterLinkActive是当前路由被选中时动态添加的类名。

<!-- 放动态加载的组件的 -->
<router-outlet></router-outlet> //这个占位符用来展示路由链接跳转的内容

<a [routerLink]="[ '/home']" RouterLinkActive="active">首页</a>

路由跳转传值

当我们在新闻组件中点击了一条新闻想要跳转到详情组件，这个时候你就需要你点的是哪条新闻。这个时候就涉及到了跳转页面传值。

动态路由传值

动态路由需要我们在app-routing-module.ts里面进行配置，在path后面通过 :id的这种形式配置动态路由，比如:

// 这个里面是配置路由的
import { NgModule } from '@angular/core';
import { RouterLinkActive, RouterModule, Routes } from '@angular/router';

// 在路由里面引入新建好的组件
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { GoodsComponent } from './components/goods/goods.component';
import { NewsComtentComponent } from './components/news-comtent/news-comtent.component';
const routes: Routes = [
  // 匹配不到路由的时候跳转的组件
  {
    path:'',component:NewsComponent
  },
  {
    path:'home',component:HomeComponent
  },
  {
    path:'news',component:NewsComponent
  },
  {
    path:'news-comtent/:aid',component:NewsComtentComponent
  },
  {
    path:'goods',component:GoodsComponent
  }

];

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

之后我们在news.component.html中进行数据渲染，以及参数配置

<h1>
我是news组件
</h1>

<a [routerLink]="[ '/news-comtent' ]">新闻详情</a>

<!-- 动态路由 -->
<ul>
    <li *ngFor="let item of list ;let key = index">
      <!-- <a [routerLink]="[ '/news-comtent' ]" [queryParams]="{aid:key}">{{key}}---- {{item}}</a> -->
      <a  [routerLink]="['/news-comtent/' ,key]">{{key}}---{{item}}</a>
</ul>

get传值

通过[queryParams]="{}"的形式来进行传值。例如：在news.component.html中

<h1>
我是news组件
</h1>

<a [routerLink]="[ '/news-comtent' ]">新闻详情</a>

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

接下来需要我们在子组件中接收父组件传过来的值，首先引入ActivatedRoute，接下来在constructor中声明一下constructor(public route:ActivatedRoute){ }，之后我们来打印一下route的内容看一下：

  ngOnInit(): void {
    // console.log(this.route.queryParams,'路由路由');可以从上边看到这样拿不到传过来参数的值
    //我们通过下边的方式来获取传过来的参数值
    this.route.queryParams.subscribe((data)=>{
      console.log(data,'获取get传值');

    })
  }

JS实现页面跳转

动态路由的JS实现页面跳转(适合普通路由和动态路由)

首先在app-routing-module.ts里面进行配置

//1.引入
import { GoodsContentComponent } from './components/goods-content/goods-content.component';

//2.配置
 {
    path:'goods-content/:pid',component:GoodsContentComponent
  }

我们在goods.component.html中放一个按钮和链接用于跳转，

<button (click)="goNewsContent()">javascript跳转页面</button>

<a [routerLink]="['/goods-content/','123']" >跳转到商品详情</a>

在goods.component.ts中引入Router模块，然后在constructor进行声明，使用navigate实现跳转

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-goods',
  templateUrl: './goods.component.html',
  styleUrls: ['./goods.component.scss']
})
export class GoodsComponent implements OnInit {

  constructor(public router:Router) { }

  ngOnInit(): void {
  }
  goNewsContent(){
    // alert('1222')
    this.router.navigate(['/goods-content/','666'])
  }
}

Angular入门教程 | 07Angular路由跳转传值