0

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

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

应用程序路由.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])
}

}

车库细节.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
  }
  
}
4

1 回答 1

0

这样，如果某些参数为空，您将无法导航。您可以从角度路径尝试 QueryParams 有可能使用 params 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
 }
于 2020-08-27T20:43:31.880 回答