面试题：Angular中如何通过路由参数传递简单数据并在目标组件获取

Question

假设在Angular项目中，有一个列表页面展示文章标题，点击标题跳转到文章详情页并传递文章的id作为路由参数。请描述实现这个功能的步骤，包括在路由配置文件和组件中的代码实现。

Answer 1

1. 路由配置文件（通常是 app-routing.module.ts）

1. 导入相关模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ArticleListComponent } from './article-list/article-list.component';
import { ArticleDetailComponent } from './article-detail/article-detail.component';

2. 定义路由：

const routes: Routes = [
  { path: 'articles', component: ArticleListComponent },
  { path: 'articles/:id', component: ArticleDetailComponent }
];

3. 配置路由模块：

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

2. 文章列表组件（ArticleListComponent）

1. 导入 Router 模块：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

2. 在组件类中注入 Router 并定义点击事件处理函数：

@Component({
  selector: 'app-article-list',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent {
  constructor(private router: Router) {}

  goToArticleDetail(id: number) {
    this.router.navigate(['/articles', id]);
  }
}

3. 在模板文件（article-list.component.html）中绑定点击事件：

<ul>
  <li *ngFor="let article of articles">
    <a (click)="goToArticleDetail(article.id)">{{ article.title }}</a>
  </li>
</ul>

这里假设 articles 是组件中定义的文章列表数据，article.id 和 article.title 是文章对象的属性。

3. 文章详情组件（ArticleDetailComponent）

1. 导入 ActivatedRoute 模块：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

2. 在组件类中注入 ActivatedRoute 并获取路由参数：

@Component({
  selector: 'app-article-detail',
  templateUrl: './article-detail.component.html',
  styleUrls: ['./article-detail.component.css']
})
export class ArticleDetailComponent {
  articleId: number;
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
      this.articleId = +params['id'];
    });
  }
}

在模板文件（article-detail.component.html）中可以根据 articleId 来展示相应文章的详细内容，通常会结合服务从后端获取数据。例如：

<div>
  <h2>文章详情 - {{ articleId }}</h2>
  <!-- 这里可以根据 articleId 获取并展示文章详细内容 -->
</div>