Я был совершенно не там, где должен был быть, когда искал помощи в этом вопросе.Я знаю, что мне нужно использовать дочернюю навигацию, чтобы иметь возможность отображать информацию под идентификатором в файле JSON.
Проект, который я создаю, находится на Angular 7. Это сайт, который имеет 7 карт, которые представляютодин из 7 грехов.Идея заключается в том, что когда пользователь нажимает на одну из 7 карт, отображается скрытый элемент div и отображается содержимое этой карты.Первоначально я надеялся просто вызвать идентификатор из JSON и отобразить любой контент, являющийся дочерним по отношению к идентификатору.Это был главный контрольно-пропускной пункт.После долгих исследований я нашел пример использования дочернего маршрутизатора, который вызывает идентификатор из app-routing.module.Я настроил дочерний маршрутизатор, ниже его копия.
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": 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 должен быть единственным файлом для этого проекта.Чтобы сделать это, я создал второй компонент, называемый грехами.Этот компонент имеет только HTML и маршрутизацию для идентификатора.Другое содержимое скрыто за инструкциями ngIf.Я хотел, чтобы у меня была непрозрачная маска фона, показывающая все карты независимо от того, какую информацию просматривал пользователь.У меня есть другие страницы, работающие отлично, но получение контента для карточек, чтобы он мог представлять только один набор контента за раз, не работает так, как я ожидал.Когда я нажимаю на карту, я получаю ошибку маршрутизатора -
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 для отображения содержимого в компоненте грехов, он разбивает весь компонент и ничего не отображается, нажатие на карты ничего не дает.В целях изоляции проблемы было закомментировано несколько вещей.
<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>
Со всей этой предысторией кто-нибудь пытался использовать дочерний маршрутизатор для отображения содержимого на основе идентификатора в файле JSON воднокомпонентная страница в Angular 7?