访问路径参数-角度8

Question

嘿，试图用产品构建网站，但是我无法从productComponent到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);
})

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

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

您将通过管道将其传递到可观察的paramMap上以获取您的路线参数，并使用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。