访问路由参数 - 角度 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);
})

注意路由参数总是字符串，所以在上面的sn-p中，我在find方法中将id转换为数字。

不过，我建议您完全避免显式订阅。下面，我描述了一个更易于维护的实现，它更接近于响应式范式，并包含了一个工作的 stackblitz 示例。

您可以通过管道连接到 paramMap observable 以获取您的路由参数，使用 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。