角2中的动态按钮
我正在努力编码我自己的网站。但我有一个按钮的问题。这是我的密码；
<div *ngFor="let game of games" class=card">
<div class="card-body">
<h5 class="card-tittle">{{game.name}}</h5>
<p class="card-text">{{game.description}}</p>
<button class="btn btn-primary" routerLink="/games/details/{{game.name}}"> Game Details</button>
</div>
我的问题是，我如何使这个“游戏细节”按钮动态？我想说的是，如果有人用一个叫做"COD黑OPS“的游戏按下它，它应该在新的页面上显示json的"COD黑色操作”部分，如果有人用一个名为"FIFA“的游戏按它，它应该在新页面上显示json的"FIFA”部分。下面是一个避免混淆的图像；页面设计。正如我已经说过的，当有人按下COD操作卡上的“游戏细节”时，它会指向gameDetails组件，但是我将如何动态地将游戏的名称携带到该域呢？
(从现在起谢谢:)
PS:只有一个gameDetails组件。我认为，如果我能够动态地获得游戏名称，我就可以从json筛选出所选游戏的细节。
回答 2
Stack Overflow用户
发布于 2020-05-21 18:33:54
我认为您正在寻找的是一个服务。
服务是一个JavaScript类，包括用于在组件之间共享数据的属性和方法。
示例：
import { Injectable } from '@angular/core';
import { Game } from '../models/game';
@Injectable()
export class SelectedGameService {
selectedGame: Game;
constructor() { }
}将其添加到模块中的providers中。
import { SelectedGameService } from './selected-game.service';
@NgModule({
declarations: [...],
imports: [...],
providers: [SelectedGameService ],
bootstrap: [...]
})然后把这个注入你的组件中。
import { SelectedGameService } from './selected-game.service';
import { Router } from '@angular/router';
export class AppComponent {
constructor(private router: Router,
private selectedGameService : SelectedGameService ){}
handleDetailsClick(game) {
this.selectedGameService = game;
this.router.navigate([`details/{game.id}`]);
}
}类似地，向details组件注入并访问数据。
那么这一切都是有关联的。您可以在一个组件中修改服务的数据，移动到另一个组件，轻松地访问服务的数据。
我已经在stackblitz上创建了一个工作示例：https://stackblitz.com/edit/angular-qsovts-service-example
Stack Overflow用户
发布于 2020-05-21 17:10:23
与其在按钮上直接设置路由器链接，不如在单击按钮(如：<button class="btn btn-primary" (click)="routeToDetailPage(game.name)"> Game Details</button> )和组件中调用方法时，注入路由器和ActivatedRoute。您的方法如下所示：
routeToDetailPage(gameName){
this.router.navigate([`./games/details/${gameName}`],
{
relativeTo:this.activatedRoute,
state:{data:gameName}
}
)};详细信息页，您可以使用历史记录和history.state访问路由数据。
https://stackoverflow.com/questions/61939478
复制相似问题
腾讯云开发者
