访问路由参数 - angular 8

Question

嘿，试图用产品建立网站，但我无法从 productsComponent 到 ProductDetailsComponent 获取数据。请帮我。

在我的 Product.ts 我有：

    export class Product {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

在我的 ProductsComponenet 我有：

    import { Component } from '@angular/core';
import { Product } from '../services.service';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})
export class ServicesComponent {
  public products: Product[] = [
    new Product(1, "Product 001"),
    new Product(2, "Product 002"),
    new Product(3, "Product 003"),
    new Product(4, "Product 004"),
    new Product(5, "Product 005"),
    new Product(6, "Product 006"),
    new Product(7, "Product 007"),
    new Product(8, "Product 008")
  ];
}

在我的 ProductDetailComponent 中：

    import {Component, OnInit} from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { Product } from '../services.service';



@Component({
  selector: 'app-detail-service',
  templateUrl: './detail-service.component.html',
  styleUrls: ['./detail-service.component.css']
})
export class DetailServiceComponent implements OnInit {

  public products: Product[] = [
    new Product(1, "Product 001"),
    new Product(2, "Product 002"),
    new Product(3, "Product 003"),
    new Product(4, "Product 004"),
    new Product(5, "Product 005"),
    new Product(6, "Product 006"),
    new Product(7, "Product 007"),
    new Product(8, "Product 008")
  ];
  product: Product = this.products[0];

  constructor(private routes: ActivatedRoute) {}
  ngOnInit() {
    this.routes.params.subscribe(params => {
      this.products.forEach((p: Product) => {
        if (p.id === params.id) {
          this.product = p;
        }
      });
    });
  }
}

我在 products.html 中显示每个产品，在我点击任何产品后，它会用我的产品呈现我的 productdetails.html，但没有显示正确的名称和 ID。IT 显示每个产品中的第一个，但链接与产品 ID 正确。请帮忙。我真的无法弄清楚发生了什么。

Answer 1

要直接解决您的问题，您需要执行以下操作：

this.route.paramMap.subscribe(params => {
   let id = params.get('id');
   this.product = this.products.find(product => product.id === +id);
})

请注意，路由参数始终是字符串，因此在上面的代码段中，我将 id 转换为find方法中的数字。

但是，我建议您完全避免明确订阅。下面，我描述了一个更易于维护的实现，它更紧密地遵循反应式范式，并且我已经包含了一个有效的 stackblitz 示例。

您将通过管道连接到paramMapobservable 以获取您的路由参数，通过switchMap运营商订阅它，并使用产品服务通过 id 获取产品。

您的 product-detail.component.ts 将如下所示：

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  product$: Observable<any>;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService
  ) { }

  ngOnInit() {
    this.product$ = this.route.paramMap.pipe(
      switchMap(params => {
        let id = params.get('id');
        return this.productService.getProductById(+id);
      })
    )
  }

}

请注意，pipe直到我们订阅它才会执行。我们应该async为此使用管道。所以你的 product-detail.component.html 应该是这样的：

<div class="product-detail-wrapper" *ngIf="product$ | async as product">
  <h3>Product Detail</h3>
  <p>Product ID: {{ product.id }}</p>
  <p>Product Name: {{ product.name }}</p>
</div>

有关工作示例，请查看此stackblitz。