如何在Angular TypeScript中的下一页单击按钮显示数据

Question

我想在另一个页面上显示我在底部链接的图像中的正确数据，这取决于它的id和单击的按钮。

例如，我是否必须生成一个签出组件，在单击按钮后显示skie.component.html中的数据？

我需要在skie.component.ts中做什么？使用路由重定向到另一个页面

无论如何，希望你能理解我的问题，如果没有足够的信息，我很抱歉，我很感激我能得到的所有帮助

skie.component.ts

import { Component, OnInit } from '@angular/core';
import { Skie } from '../../entities/skie';
import { skiEquipmentsData } from '../../ski-equipments';
@Component({
selector: 'app-skies',
templateUrl: './skies.component.html',
styleUrls: ['./skies.component.scss']
})
export class SkiesComponent implements OnInit {
skies: Array<Skie> = new Array<Skie>();
constructor() { }
ngOnInit(): void {
this.skies = skiEquipmentsData;
}
}

skie.component.html

<div class="card-deck" *ngIf="skie">
<div class="card">
<img class="card-img-top" [src]="skie.imageUrl">
<div class="card-body">
<h2 class="card-title">{{skie.header}}</h2>
<p class="card-text">{{skie.description}}</p>
<div [ngClass]="{'limitTextHeight': isReadMore}">
<p class="card-text" [innerHTML]="skie.extendedDescription"></p>
</div>
<button type="button" class="btn btn-link" (click)="showText()">
{{ isReadMore ? 'Read More': 'Read Less' }}
</button>
<div class="buttonRight">
<button type="button" class="btn btn-primary">Välj Paket</button>
</div>
</div>
</div>

这是带有id的信息/数据列表滑雪设备.ts

export const skiEquipmentsData = [
{
id: 1,
header: "Nybörjarpaketet",
description: "Detta är ett perfekt paket för dig som inte är så van vid att åka, men ändå vill få ut det mesta möjliga av din tid i backen",
extendedDescription: "Paket består av:<p><ul><li>Skida: Atomic Performer FB</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Nordica Trend LX 20/21</li></p>",
imageUrl: "/assets/images/beginner.png"
},
{
id: 2,
header: "Medelpaketet",
description: "Om du har åkt en del och vill ha en lite mer avancerad utrustning ska du välja detta paket. Här får du den bästa kompromissen mellan lättåkta skidor och bra prestanda.",
extendedDescription: "Paket består av:<p><ul><li>Skida: Atomic Redster WT</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Atomic Hawx Magna 100 21/22</li></p>",
imageUrl: "/assets/images/medium.png"
},
{
id: 3,
header: "Expertpaketet",
description: "När du vill ha det bästa som går att få för att känna att din skidåkning kan nå nya höjder är detta paketet för dig. Med denna topputrustning garanterar vi att du kommer att få en riktigt minnesvärd tid i backarna.",
extendedDescription: "Paket består av:<p><ul><li>Skida: Rossignol BlackOps Stargazer (Open) 21/22</li><li>Bindning: Touring Bindings Marker Alpinist 10 21/22</li><li>Pjäxa: Rossignol Alltrack Elite 90 GW (98 mm) 21/22</li></p>",
imageUrl: "/assets/images/expert.png"
}
];

查看图片以了解我想要显示的内容图像

Answer 1

如果你想让每个产品的详细信息模板页面都一样，你可以这样做：

在app-routing.module.ts中添加id为param:的新细节组件

{
path: 'skie/:id',
component: SkieDetailsComponent
}, // ...

然后在SkieDetailsComponent中使用ActivatedRoute捕获参数

skie: any;
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
this.skie = skiEquipmentsData.find(s => s.id === id);
}

现在，您可以在详细信息页面上显示和使用数据，如｛｛skie.description｝｝等。

最后一件事是将routerLink添加到您的滑雪组件：

<button type="button" class="btn btn-primary" [routerLink]="['/skie', skie.id]">Välj Paket</button>