Angular 6 中的数据未通过路由

Question

我有一个包含 table 辆汽车的应用程序：

这是我的代码：

Carcomponent.html

<tbody>
        <tr *ngFor="let car of allCars; index as carId" \>
          <td [routerLink]="['/cars', carId]">{{car.carId}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.model}}</td>
          <td>{{car.color}}</td>
          <td>{{car.topSpeed }}</td>
        </tr>
</tbody>

我已经注册了这样的路线：

{ path: 'cars/:carId', component: CardetailsComponent }

这是我的 CarDetails.ts 文件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarVM } from '../viewmodels/car-vm';
import { CarService } from '../services/car.service';

@Component({
  selector: 'app-cardetails',
  templateUrl: './cardetails.component.html',
  styleUrls: ['./cardetails.component.css']
})

export class CardetailsComponent implements OnInit {

  car: any;
  carList: any;

  constructor(private route: ActivatedRoute, private carservice: CarService) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.car = params.get('carId');
    });
  }
  getCarList() {
    this.carList = new CarVM();
    this.carservice.getCarById(this.carList.carId).subscribe((res: any) => {
      this.carList = res.data;
      console.log(this.carList)
    })
  }
}

在我的 Cardetails.html 上，我想像这样显示 selected 汽车：

<h2>Car Details</h2>
<div *ngIf="car">
  <h3>{{ car.brand }}</h3>
  <h4>{{ car.model }}</h4>
  <p>{{ car.color }}</p>
</div>

路由工作正常，取车工作正常。现在我想 select 一辆汽车，并在下一页查看 品牌、型号、颜色 。我为此使用了一个视图模型：

export class CarVM {
  CarId: number;
  Brand: string;
  Model: string;
  Color: string;
  TopSpeed: number;
}

如何在下一页看到 selected 的汽车？

我已经学习了这个教程：

https://angular.io/start/routing

Answer 1

问题是，您在 CardetailsComponent 上没有正确的 CarVM 对象。您只是在此处将 carId 导入 CarVM：this.car = CarVM[+params.get('carId')];

首先，您需要使用 class 变量正确创建 CarVM。你可以调用你的索引。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarVM } from '../viewmodels/car-vm';

@Component({
  selector: 'app-cardetails',
  templateUrl: './cardetails.component.html',
  styleUrls: ['./cardetails.component.css']
})

export class CardetailsComponent implements OnInit {

  car: any;
  carList: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
          this.car = params.get('carId');
        });
      }
   getCarList(){
   this.carList = new CarVM();
   //call your service here to fill your carList variable and once you get car list, you will be able to access variable using with your index (this.car).
  }
 }

Answer 2

好吧，你好像有点糊涂了。在 cardetails 组件中，您想从路线参数中处理 carId 并使用它来获取汽车详细信息。您可以从服务器获取它们，或者让服务 return 已经加载所有汽车的详细信息。

假设我们正在尝试以第一种方式实现它，它可能看起来像这样：

import { map, switchMap } from 'rxjs/operators';

ngOnInit() {
  this.getCar();
}

private getCar(): void {
  this.route.paramMap.pipe(
    map(params => params.get('carId')),
    switchMap(carId => {
      return this.carservice.getCarById(carId);
    })
  ).subscribe(
    res => {
      this.car = res;
      console.log('@My car:', this.car);
    }
  );
}

首先，您将从 route.paramMap 获取 carId，使用 rxjs map 映射它，然后使用 switchMap 调用您 carservice.getCarById(carId) 和拥有 return 您可以订阅的 Observable。这应该可以解决问题。不要忘记从中正确映射 it/create CarVM 对象。

Angular 6 中的数据未通过路由

Data not passing through with route in Angular 6

html

javascript

routing

typescript

angular