面试题：Angular中如何配置基本的路由及传递参数

Question

在Angular项目中，描述一下如何配置两个基本路由组件之间的跳转，并实现从一个组件向另一个组件传递简单参数（如字符串类型参数），请给出关键代码示例。

Answer 1

1. 配置路由：
   • 首先在app - routing.module.ts中配置路由。假设我们有两个组件ComponentA和ComponentB。

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { ComponentA } from './component - a.component';
   import { ComponentB } from './component - b.component';
   
   const routes: Routes = [
       { path: 'component - a', component: ComponentA },
       { path: 'component - b/:param', component: ComponentB }
   ];
   
   @NgModule({
       imports: [RouterModule.forRoot(routes)],
       exports: [RouterModule]
   })
   export class AppRoutingModule {}
   

2. 从ComponentA跳转到ComponentB并传递参数：
   • 在ComponentA的模板文件（component - a.component.html）中，使用routerLink指令来实现跳转并传递参数。

   <a [routerLink]="['/component - b', 'example - string']">跳转到ComponentB并传递参数</a>
   

   • 也可以在ComponentA的组件类（component - a.component.ts）中通过编程方式实现跳转：

   import { Component } from '@angular/core';
   import { Router } from '@angular/router';
   
   @Component({
       selector: 'app - component - a',
       templateUrl: './component - a.component.html',
       styleUrls: ['./component - a.component.css']
   })
   export class ComponentA {
       constructor(private router: Router) {}
   
       goToComponentB() {
           const param = 'example - string';
           this.router.navigate(['/component - b', param]);
       }
   }
   

3. 在ComponentB中接收参数：
   • 在ComponentB的组件类（component - b.component.ts）中，通过ActivatedRoute来获取传递的参数。

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   
   @Component({
       selector: 'app - component - b',
       templateUrl: './component - b.component.html',
       styleUrls: ['./component - b.component.css']
   })
   export class ComponentB implements OnInit {
       paramValue: string;
   
       constructor(private route: ActivatedRoute) {}
   
       ngOnInit() {
           this.route.paramMap.subscribe(params => {
               this.paramValue = params.get('param');
           });
       }
   }
   

   • 然后在ComponentB的模板文件（component - b.component.html）中可以使用这个参数：

   <p>接收到的参数值: {{paramValue}}</p>