Angular点击列表项跳转后如何在同一组件加载对应不同数据

你这个需求用Angular带动态参数的路由就能实现，总共4步就能搞定：

1. 配置带参数的路由 #

打开你的项目路由配置文件（一般是app-routing.module.ts），给item-info页面加带id参数的路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ListUiComponent } from './list-ui/list-ui.component';
import { ItemInfoComponent } from './item-info/item-info.component'; // 导入你的组件

const routes: Routes = [
  { path: 'list-ui', component: ListUiComponent },
  // 新增带id参数的路由
  { path: 'item-info/:id', component: ItemInfoComponent },
  { path: '', redirectTo: '/list-ui', pathMatch: 'full' }
];

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

2. 给item组件添加跳转链接 #

修改item组件的模板，给a标签绑定动态路由，把当前条目的id作为参数传过去：

<!-- 把原来的空a标签改成下面这样 -->
<a [routerLink]="['/item-info', crib.id]">
<div class="item row">
<!-- 剩下的原有代码不变 -->
<div class="col-6"><div class="text-con">
<h4>{{ crib.title }}</h4>
<small>{{ crib.adress }}</small>
<p>{{ crib.content }}</p>
<p>{{ crib.description }}</p>
 </div>
  </div>
    <div class="col-6">
      <div class="img-div">
        <img
          src="{{ crib.image }}"
          width="210px"
          alt="house1"
          class="item-img"
        />
      </div>
    </div>
  </div>
</a>

3. ItemInfo组件获取参数加载对应数据 #

修改item-info.component.ts，导入路由工具和你的数据源，根据路由拿到的id匹配对应的数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { data } from './你的Data.ts文件路径'; // 替换成你实际的Data.ts路径

@Component({
  selector: 'app-item-info',
  templateUrl: './item-info.component.html',
  styleUrls: ['./item-info.component.css']
})
export class ItemInfoComponent implements OnInit {
  currentCrib: any; // 存当前展示的条目数据

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 拿到路由参数里的id
    const cribId = Number(this.route.snapshot.paramMap.get('id'));
    // 从数据源里匹配对应id的条目
    this.currentCrib = data.find(item => item.id === cribId);
  }

}

4. 替换item-info模板的静态内容 #

把模板里写死的内容全部替换成绑定currentCrib的对应属性：

<div class="item-info">
<div class="top">
 <p><i class="fas fa-arrow-left"></i> <a routerLink="/list-ui"> Back</a></p>
 </div>
 <div class="middle-item-info col-12">
 <h4 class="pt-4">{{ currentCrib.title }}</h4>
 <small>{{ currentCrib.adress }}</small>
  <div class="row mx-auto" id="contact-div">
   <div class="col-4 text-center">
     <i class="fas fa-phone-alt"></i>
     <p>Call now</p>
      </div>
      <div class="col-4 text-center">
        <i class="far fa-envelope"></i>
        <p>E-Mail</p>
      </div>
      <div class="col-4 text-center">
        <i class="fas fa-globe-europe"></i>
        <p>Website</p>
      </div>
    </div>
  </div>
  <div class="content-div">
    <p>
      <i class="fas fa-building"></i> {{ currentCrib.content }}
    </p>
    <p><i class="fas fa-user"></i> {{ currentCrib.ownerName }}</p>
    <p><i class="fas fa-directions"></i> Section 8</p>
    <p><i class="fas fa-thumbtack"></i> {{ currentCrib.location }}</p>
    <p><i class="fas fa-tools"></i> {{ currentCrib.build }}</p>
  </div>
  <hr />
  <div class="values">
    <p>HIGH-VALUE amenities</p>
    <div>
      <p><i class="fas fa-dumbbell"></i> {{ currentCrib.highValue1 }}</p>
      <p><i class="fas fa-utensils"></i> {{ currentCrib.highValue2 }}</p>
    </div>
  </div>
</div>

如果你不想用路由传参，也可以用服务共享数据的方式实现，但对于你这个简单场景，路由传参是最直接的方案，还支持页面刷新后数据依然正常加载。

内容的提问来源于stack exchange，提问作者Ismail Beg