我正在尝试编写自己的网站。但是我的按钮有问题。这是我的代码；
<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 Black OPS”的游戏按下它，它应该在新页面上显示json的“ COD Black Ops”部分，如果有人用名为“ FIFA”的游戏按下它”，它将在新页面上显示json的“ FIFA”部分。这是避免混淆的图片；页面的设计。就像我说过的那样，当有人按下COD Black Ops卡上的“游戏详细信息”时，它会直接指向gameDetails组件，但是我将如何动态将游戏名称携带到该主机上？
从现在开始谢谢你:)
PS：只有一个gameDetails组件。我的想法是，如果可以动态获取游戏名称，则可以从json过滤所选游戏的详细信息。
我认为您正在寻找的是服务。
服务是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}`]);
}
}
同样，将其注入到细节组件中并访问数据。
然后就全部连接了。您可以在一个组件中修改服务的数据，然后移至另一组件并轻松访问服务的数据。
我已经在stackblitz上创建了一个工作示例：https ://stackblitz.com/edit/angular-qsovts-service-example
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句