在寻求有关此问题的帮助时，我本该远离原本应该去的地方。我知道我需要使用子导航才能在JSON文件的ID下显示信息。
我正在构建的项目在Angular 7中。该站点有7张卡，代表7个罪过之一。这个想法是，当用户单击7张卡中的一张时，将显示一个隐藏的div并显示该卡的内容。最初，我希望只是从JSON调用id，并显示id的所有子内容。这是一个主要障碍。经过大量研究，我找到了一个使用子路由器的示例，该子路由器从app-routing.module调用ID。我已经设置了儿童路由器，下面是它的副本。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CardComponent } from './card/card.component';
import { SinsComponent } from './sins/sins.component';
const routes: Routes = [
{
path: '',
component: CardComponent,
children: [
{
path: 'sins/:id',
component: SinsComponent
}
]
},
{
path: 'sins',
component: CardComponent,
children: [
{
path: 'sins/:id',
component: SinsComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
JSON文件的结构是以ID作为标识，所有要显示的内容都属于父级“ component”
[
{
"id": 1,
"content": [
{
"sin": "Vanity",
"card": "/assets/img/vanity.jpg",
"icon": "/assets/img/vanityIcon.jpg",
"info": "In..."
}
]
},
{
"id": 2,
"content": [
{
"sin": "Envy",
"card": "/assets/img/envy.jpg",
"icon": "/assets/img/envyIcon.jpg",
"info": "Like..."
}
]
},
{
"id": 3,
"content": [
{
"sin": "Sloth",
"card": "/assets/img/sloth.jpg",
"icon": "/assets/img/slothIcon.jpg",
"info": "More..."
}
]
},
{
"id": 4,
"content": [
{
"sin": "Wrath",
"card": "/assets/img/wrath.jpg",
"icon": "/assets/img/wrathIcon.jpg",
"info": "Wrath..."
}
]
},
{
"id": 5,
"content": [
{
"sin": "Lust",
"card": "/assets/img/lust.jpg",
"icon": "/assets/img/lustIcon.jpg",
"info": "Lust..."
}
]
},
{
"id": 6,
"content": [
{
"sin": "Gluttony",
"card": "/assets/img/gluttony.jpg",
"icon": "/assets/img/gluttonyIcon.jpg",
"info": "Derived..."
}
]
},
{
"id": 7,
"content": [
{
"sin": "Greed",
"card": "/assets/img/greed.jpg",
"icon": "/assets/img/greedIcon.jpg",
"info": "Greed..."
}
]
}
]
我的card.component应该是该项目的唯一文件。为了完成这项工作，我创建了第二个组件，称为sins。该组件仅具有HTML和ID路由。其他内容隐藏在ngIf语句后面。我希望能够有一个不透明的背景遮罩，无论用户正在查看什么信息，它都能显示所有卡片。我还有其他页面工作得很好，但是获取卡片的内容，使其一次只能显示一组ID内容，却无法达到我期望的方式。当我单击卡时，出现路由器错误-
CardComponent.html:39 ERROR Error: The requested path contains undefined segment at index 0
at validateCommands (router.js:4373)
at Router.push../node_modules/@angular/router/fesm5/router.js.Router.navigate (router.js:4259)
at CardComponent.push../src/app/card/card.component.ts.CardComponent.viewSin (card.component.ts:108)
at Object.eval [as handleEvent] (CardComponent.html:39)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:21003
at HTMLImageElement.<anonymous> (platform-browser.js:993)
当用户单击其中一张卡时，将调用ViewSin函数，该功能应该显示隐藏的组件并显示与该卡关联的内容。
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { trigger, style, animate, transition } from '@angular/animations';
import { Router } from '@angular/router';
export class Sin {
id: number;
sin: string;
card: string;
icon: string;
info: string;
}
@Component({
selector: 'app-card',
animations: [
trigger('clickevent', [
transition(':enter', [
style({transform: 'translateX(0)', opacity: 0}),
animate('500ms', style({transform: 'translateX(0)', opacity: .75}))
]),
transition(':leave', [
style({transform: 'translateX(0)', opacity: .75}),
animate('500ms', style({transform: 'translateX(0)', opacity: 0}))
])
])
],
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
menu = true;
arts = false;
menuOpen = false;
history = false;
sins = false;
cards: any;
constructor(private router: Router, private http: HttpClient) { }
ngOnInit(): void {
this.http.get<any>('./assets/json/cards.json').subscribe(
data => {
this.cards = data;
});
}
rotateCards() {
// x & y positioning of boxes
const windowW = window.innerWidth;
const windowH = window.innerHeight;
const winWidthAdjustment = windowW - 360;
const winHeightAdjustment = windowH - 360;
const randWidth = Math.floor(Math.random() * winWidthAdjustment);
const randHeight = Math.floor(Math.random() * winHeightAdjustment);
// Boolean for whether the number is positive or negative
const randSign = Math.random() < 0.5 ? -1 : 1;
// Randomize rotate degree
const randRotation = Math.random() * 60 * randSign;
const styles = {
left: randWidth + 'px',
top: randHeight + 'px',
transform: 'rotate(' + randRotation + 'deg)'
};
return styles;
// this.style.left = randWidth + 'px';
// this.style.top = randHeight + 'px';
// this.cards.style.transform = 'rotate(' + randRotation + 'deg)';
}
toggleMenu() {
this.menuOpen = false;
this.menu = true;
this.history = false;
this.arts = false;
this.sins = false;
}
toggleSin() {
this.menuOpen = true;
this.menu = false;
}
toggleHistory() {
this.menuOpen = true;
this.menu = false;
this.history = !this.history;
}
toggleArts() {
this.menuOpen = true;
this.menu = false;
this.arts = true;
}
viewSin(id) {
this.sins = true;
this.router.navigate([id]).then( (e) => {
if (e) {
console.log('Navigation is successful');
} else {
console.log('Navigation has failed');
}
});
// return styles;
}
}
我的另一个问题是，当我尝试使用ngFor来显示sins组件中的内容时，它破坏了整个组件，并且什么也不显示，单击卡上没有任何效果。为了隔离该问题，已经注释了几件事。
<div class="cardMask">
<!-- <p *ngFor="let sublist of jo.content">{{sublist.info}}</p> -->
<p>Sins Work!</p>
<p *ngFor="let jo of newName">{{jo.id}}</p>
<!-- <img class="card" *ngFor="let sublist of jo.content" [src]="sublist.card" /> -->
<div class="allCards">
<!-- <div class="thumbnails"><img *ngFor="let jo.content of cards" class="icon" [src]="jo.icon" /><span>{{cards.sin}}</span></div> -->
</div>
</div>
在所有背景故事中，有没有人试图使用子路由器在Angular 7的一个组件页面中基于JSON文件中的ID显示内容？