错误错误：请求的路径在索引3

如何解决错误错误：请求的路径在索引3

尝试通过将以下参数作为参数在以下提到的组件之间进行路由

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的引脚，控制台将引发标题中提到的错误 这是我定义的路径，我想将值从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
  }
  
}

解决方法

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

{
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
 }