单击Angular按钮可在两个页面之间共享数据

Question

我试图在点击按钮后将英雄详细信息显示在英雄详细信息页面上，但我似乎不知道如何使其工作。当我点击按钮时，我可以在英雄列表页面上显示详细信息，但如果我试图使用routerLink重新路由，我无法获得显示的数据。现在我只是使用<应用程序英雄细节[hero]="；selectedHero">这样我就可以在点击英雄按钮时显示数据。我想这与这个[英雄]="；selectedHero"；。

heroes-list.components.html

<h1>Hero List</h1>
<ul>
<!--Displays a list of hero names-->
<li *ngFor="let hero of heroes">
<button type="button" (click)="onSelect(hero)" [class.selected]="hero === selectedHero"  >

<span class="name">{{hero.name}}</span >

</button>
</li>
</ul>
<!-- just used to test hero-details page routing -->
<!-- <p><a routerLink="/hero-details" routerLinkActive="active">Click here</a></p> -->
<!-- just used to test 404/wildcard page routing -->
<!-- <p><a routerLink="/fakeLink" routerLinkActive="active">Click here</a></p> -->

<!-- this will show the data on this page-->
<app-hero-details [hero]="selectedHero" ></app-hero-details>

heroes-list.component.ts

import { Component, OnInit } from '@angular/core';
import { BackendService } from '../services/backend.service';
import { Hero } from '../types/Hero';
@Component({
selector: 'app-heroes-list',
templateUrl: './heroes-list.component.html',
styleUrls: ['./heroes-list.component.css']
})
export class HeroesListComponent implements OnInit {
selectedHero?: Hero;
heroes: Hero[] = [
];
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
constructor(private backend: BackendService) { }
async ngOnInit(): Promise<void> {
// Gets a list of heroes to display
this.heroes = await this.backend.getHeroes();
}
}

hero-details.components.html

<p>Hero Details section</p>
<!-- <p><a routerLink="" routerLinkActive="active">Click here to go back to Hero List</a></p>
<h1>Hero Details page</h1> -->
<div *ngIf="hero" >

<!-- the hero details that will be displayed upon clicking on name  -->
<h2 >{{hero.name | uppercase}} Details</h2>

<div><span>Id: </span>{{hero.id}}</div>
<div><span>Level: </span>{{hero.level}}</div>
<div><span>Class: </span>{{hero.class}}</div>


</div>

hero-details.components.ts

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
import { Hero } from '../types/Hero';
@Component({
selector: 'app-hero-details',
templateUrl: './hero-details.component.html',
styleUrls: ['./hero-details.component.css']
})
export class HeroDetailsComponent implements OnInit {
@Input() hero: Hero | undefined;

constructor(
private route: ActivatedRoute,
) { }
ngOnInit(): void {
}

}

Answer 1

您的后端返回了什么吗？向我们展示后端并显示它返回的内容。此外，我建议重构ngOnInit()，使其不是异步函数。将逻辑从ngOnInit重构到新函数，并使ngOnInit调用所述新函数。

否则，它看起来应该起作用。

ngOnInit(): void {
this.getHeroes();
}
async getHeroes() {
// Gets a list of heroes to display
this.heroes = await this.backend.getHeroes();
}

示例：https://stackblitz.com/edit/heroes-list-fjdq6g?file=src%2Fapp%2Fheroes%2Fheroes.component.ts