访问路由参数- angular 8
访问路由参数- angular 8
提问于 2020-01-28 04:24:20
嘿，试图用产品建立网站，但我不能从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。它显示在每个产品中的第一个，但链接与产品的id是适当的。PLease帮助。我真的搞不懂发生了什么事。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-28 05:28:15
要直接解决您的问题，您需要执行以下操作：
this.route.paramMap.subscribe(params => {
let id = params.get('id');
this.product = this.products.find(product => product.id === +id);
})请注意，路由参数始终是字符串，因此在上面的代码片段中，我在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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59938409
复制相关文章
相似问题
腾讯云开发者
