У меня есть список колод, когда я нажимаю на колоду, загружается соответствующий компонент колоды, показывающий детали выбранной колоды, и URL становится палубой / id / deckName. Но когда я перезагружаю страницу или пытаюсь скопировать URL определенной колоды c, я получаю эту ошибку:
Невозможно прочитать свойство deckName неопределенного
Я думаю, что я ' я делаю что-то не так в маршрутизации, это компонент колоды
import { Card } from "./../../card/card.model";
import { Deck } from "./../../deck/deck.model";
import { Component, OnInit, Input } from "@angular/core";
import { DeckService } from "src/app/deck/deck.service";
import { ActivatedRoute, Params, Router } from "@angular/router";
import { Subscription } from "rxjs";
@Component({
selector: "app-deck-details",
templateUrl: "./deck-details.component.html",
styleUrls: ["./deck-details.component.scss"],
})
export class DeckDetailsComponent implements OnInit {
//@Input() deck: Deck;
paramsSubscription: Subscription;
id: number;
decks: Deck[];
deck: Deck;
constructor(private deckService: DeckService, private route: ActivatedRoute) {
}
ngOnInit() {
this.id = this.route.snapshot.params["id"];
this.paramsSubscription = this.route.params.subscribe((params: Params) => {
this.id = params["id"];
this.decks = this.deckService.getDecks();
this.deck = this.decks.find (
deck => deck.id === this.id
);
});
}
ngOnDestroy() { this.paramsSubscription.unsubscribe(); }
}
и html
<div class="container">
<div class="row">
<div class="deck-details " style="border:solid black">
<h1>{{ deck.deckName }} : {{ deck.deckClass }}</h1>
<div *ngFor="let card of deck.deckCards">
<span
[ngClass]="{
common: card.rarity == 'common',
rare: card.rarity == 'rare',
epic: card.rarity == 'epic',
legendary: card.rarity == 'legendary'
}"
>
{{ card.name }}
</span>
<h4 class="inlineh4">: {{ card.manaCost }} mana</h4>
<img [src]="card.imagePath" alt="" style="height: 20px;" />
</div>
</div>
</div>
</div>
это модуль маршрутизации приложения
const appRoutes: Routes = [
{ path: '', component: CardListComponent },
{ path: 'decks', component: DeckListComponent, children: [
{ path: ':id/:deckName', component: DeckDetailsComponent }
] },
{ path: 'createDeck', component: CreateDeckComponent },
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }