Angular 6中的数据不通过路由

Question

我有一个带有汽车表的应用程序：

这是我的代码：

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 上，我想像这样显示所选的汽车：

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

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

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

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

我已按照本教程进行操作：

https://angular.io/start/routing

Answer 1

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

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

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) 并让它返回您可以订阅的Observable。这应该可以解决问题。不要忘记正确映射它/从中创建 CarVM 对象。

Answer 2

问题是，CardetailsComponent 上没有正确的 CarVM 对象。您只是在这里将 carId 获取到 CarVM：this.car = CarVM[+params.get('carId')];

首先，您需要使用类变量正确创建 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).
  }
 }