Angular 路由和传值

小灰灰 2023-06-13 06:08 137阅读 0赞

## 一、路由和传值 ##

![20191114142746832.png][]

跳转和传值

接收

import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    
    @Component({
      selector: 'app-news-content',
      templateUrl: './news-content.component.html',
      styleUrls: ['./news-content.component.scss']
    })
    export class NewsContentComponent implements OnInit {
    
      constructor(public router:ActivatedRoute) { }
    
      ngOnInit() {
        console.log(this.router);
    
        // 用rxjs获取值
        this.router.queryParams.subscribe((data) => {
          console.log(data);
        })
      }
    
    }

# #

## 二、动态路由 ##

可以直接在路由之中配置参数

传参

{path:'newsmsg/:aid/:name',component: NewsMsgListComponent},

获取参数

动态路由跳转，用params，否则用queryParams

import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router'
    
    @Component({
      selector: 'app-news-msg-list',
      templateUrl: './news-msg-list.component.html',
      styleUrls: ['./news-msg-list.component.scss']
    })
    export class NewsMsgListComponent implements OnInit {
    
      constructor(public router:ActivatedRoute) { }
    
      ngOnInit() {
        console.log(this.router);
    
        // 用rxjs获取值
        this.router.params.subscribe((data) => {
          console.log(data);
        })
      }
    }

## 三、js调用路由 ##

3.1 传值

先引入ActivatedRoute

import { ActivatedRoute } from '@angular/router'

初始化实例router，并获取传值

import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router'
    
    @Component({
      selector: 'app-product-content',
      templateUrl: './product-content.component.html',
      styleUrls: ['./product-content.component.scss']
    })
    export class ProductContentComponent implements OnInit {
    
      constructor(public router: ActivatedRoute) { }
    
      ngOnInit() {
        // 用rxjs获取值
        this.router.queryParams.subscribe((data:any) => {
          console.log("productList" + JSON.stringify(data));
        })
      }
    
    }

四、父子路由

import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { HomeComponent } from './Component/home/home.component';
      import { WelcomeComponent } from './Component/home/welcome/welcome.component';
      import { SettingComponent } from './Component/home/setting/setting.component';
    
    import { ProductComponent } from './Component/product/product.component';
      import { PcateComponent } from './Component/product/pcate/pcate.component';
      import { PlistComponent } from './Component/product/plist/plist.component';
    
    const routes: Routes = [
      // 首页路由
      {
        path: 'home', component: HomeComponent,
        children: [
          {path: 'welcome', component: WelcomeComponent},
          {path: 'setting', component: SettingComponent},
          {path: '**', component: WelcomeComponent},
        ]
      },
    
      // 产品路由
      {
        path: 'product', component: ProductComponent,
        children: [
          {path: 'plist', component: PlistComponent},
          {path: 'pcate', component: PcateComponent},
          {path: '**', component: PlistComponent},
        ]
      },
    
      {path: '**', redirectTo: 'home'},
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

[20191114142746832.png]: https://img-blog.csdnimg.cn/20191114142746832.png