错误错误:请求的路径在索引3处包含空段

Question

试图通过将其作为参数在下面提到的组件之间进行路由，但无法进行

garage.ts是已定义的模型

export class Garage{
geo_coordinates: string;
mobile_number: number;
image: string;
garage_name: string;
address: string;
pin: number;
email: string;
owner_name: string;
type: string;
city: string;
state: string;
tag: string;
rating: number;
about: string;
working_day: string;
working_hours: number
}

data.service.ts是定义api的服务

import { Injectable } from '@angular/core';
import { Garage } from './garage';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
G_url = 'xxxxxxx'; 
constructor(private _http: HttpClient) { }
getGarage(){
return this._http.get<Garage[]>(this.G_url);
}
}

这就是api的外观

[
{
"mobile_number": "78676754565",
"garage_name": "SRI GANPATI MOTORS",
"address": "abohar",
"pin": null,
"email": "hjhjhjhh",
"owner_name": "cccgcgc",
"type": "BIKE",
"city": null,
"geo_coordinates": "12.9797482,77.63484319999999",
"state": "Punjab",
"tag": "PREMIUM ",
"image": "https://s3.ap-south-1.amazonaws.com/gp-master-data/default-logo/garage-default-logo.png",
"rating": 5,
"about": null,
"working_day": null,
"working_hours": null
}
]

我面临的问题是在路由时；在api中声明为null的pin，控制台抛出标题中提到的错误这是我定义的路径，我想将值从MapviewComponent路由到GarageDetailComponent

app-routing.module.ts

{
path: 'map',
component: MapViewComponent
},
{
path: 'garage/:garage_name/:address/:about/:rating/:type/:mobile_number/:email/:tag/:owner_name/:pin/:image',
component: GarageDetailComponent
},

map-view.component.ts，这里的onSelect((负责两个组件之间的路由，其中我尝试过进行空检查，但没有工作

import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import { Garage } from '../garage'
import { DataService } from '../data.service'; 
import { Router } from '@angular/router'
@Component({
selector: 'app-map-view',
templateUrl: './map-view.component.html',
styleUrls: ['./map-view.component.scss'],
})
export class MapViewComponent implements OnInit {
garages$: Garage[];
constructor(
private ngZone: NgZone,
private dataService: DataService,
private router: Router 
) { 
}

ngOnInit() 
{ 
return this.dataService.getGarage()
.subscribe(data => this.garages$ = data); 
}

onSelect(list){
list.pin = (list.pin || null).toString()
console.log(list.pin)
this.router.navigate(['garage', list.garage_name, list.address, list.about, list.rating, list.type, list.mobile_number, list.email, list.tag, list.owner_name,list.pin,list.image])
}
}

garage-detail.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap'
@Component({
selector: 'app-garage-detail',
templateUrl: './garage-detail.component.html',
styleUrls: ['./garage-detail.component.scss'],
providers:[NgbRatingConfig]
})
export class GarageDetailComponent implements OnInit {
public t;
public y;
public ab;
public r;
public p;
public mb;
public mid;
public g;
public own;
public pn;
public img;
constructor(private route: ActivatedRoute){
}
ngOnInit(): void{
let title =  this.route.snapshot.paramMap.get('garage_name');
let add = this.route.snapshot.paramMap.get('address');
let about = this.route.snapshot.paramMap.get('about');
let rating = this.route.snapshot.paramMap.get('rating');
let type = this.route.snapshot.paramMap.get('type');
let mob = this.route.snapshot.paramMap.get('mobile_number');
let em = this.route.snapshot.paramMap.get('email');
let tag = this.route.snapshot.paramMap.get('tag');
let owner = this.route.snapshot.paramMap.get('owner_name');
let pn = this.route.snapshot.paramMap.get('pin');
let image = this.route.snapshot.paramMap.get('image');
this.t = title;
this.y = add;
this.ab = about 
this.r = rating;
this.p = type;
this.mb = mob;
this.mid = em;
this.g = tag;
this.own = owner;
this.pn = pn
this.img = image
}

}

Answer 1

这样，如果某些参数为null，则无法导航。你可以从角度路线尝试QueryParams，有可能使用参数空导航

{
path: 'garage',
component: GarageDetailComponent
},
onSelect(list){
this.router.navigate(['garage'],{ queryParams:{
garage_name: list.garage_name, 
address: list.address, 
about: list.about, 
rating: list.rating, 
type: list.type, 
mobile_number: list.mobile_number, 
email: list.email, 
tag: list.tag, 
owner_name: list.owner_name,
pin: list.pin,
image: list.image
}
})
}
ngOnInit(): void{
let title =  this.route.snapshot.queryParamMap.get('garage_name');
let add = this.route.snapshot.queryParamMap.get('address');
let about = this.route.snapshot.queryParamMap.get('about');
let rating = this.route.snapshot.queryParamMap.get('rating');
let type = this.route.snapshot.queryParamMap.get('type');
let mob = this.route.snapshot.queryParamMap.get('mobile_number');
let em = this.route.snapshot.queryParamMap.get('email');
let tag = this.route.snapshot.queryParamMap.get('tag');
let owner = this.route.snapshot.queryParamMap.get('owner_name');
let pn = this.route.snapshot.queryParamMap.get('pin');
let image = this.route.snapshot.queryParamMap.get('image');
this.t = title;
this.y = add;
this.ab = about 
this.r = rating;
this.p = type;
this.mb = mob;
this.mid = em;
this.g = tag;
this.own = owner;
this.pn = pn
this.img = image
}