Angular - [routerLink] 在同一模块中重定向的问题

Question

目前我尝试使用 Angular 9 进行 SPA。我使用此路由 localhost:4200/products 制作了一个名为 products 的模块，并使用此路由 http://localhost:4200/products/(number_id_product) 查找指定产品)

我想在每次需要查看产品时实现这个组件。我的问题是，当我使用带有 [routerlink] 的链接（http://localhost:4200/products/1 到 http://localhost:4200/products/2）从当前产品页面转到另一个产品时，url 发生了变化但内容页面不会改变并保持上一个产品的相同信息。

我不知道 [routerlink] 重定向发生了什么

我的代码.ts

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/shared/models/product';
import { ActivatedRoute } from '@angular/router';
import { ProductsService } from 'src/app/shared/services/products.service';

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

  id: string;
  product: Product

  constructor(private route: ActivatedRoute, private service: ProductsService) { }

  ngOnInit(): void {

    this.id= this.route.snapshot.paramMap.get('id')
    //get products/id

    this.service.getProduct(this.id)
      .subscribe(prod=>{
        console.log(`Prod ↓ `)
        console.log(prod)
        this.product=prod
        })

  }

}

我的代码 html

<div class="container-product">
 <h1>{{product.title}}</h1>
 <img mat-card-image [src]="product.thumbImage">
 <span class="product-descrp">{{product.description}}</span>
 <span [routerLink]="['','products','another_id_product']">See another product!</span>

</div>

Answer 1

有问题的两个网址（即/products/1 和/product/2）匹配相同的路径定义/products:id。因此，当从/products/1 移动到/products/2 时，匹配路径保持不变，这意味着路由器使用的组件保持不变。默认情况下，组件不会被销毁和重新渲染。

如果您希望您的组件在不同的产品 ID 之间切换，您应该重构它，使其不会像在 ngOnInit 中那样只读取一次路由参数：

this.id= this.route.snapshot.paramMap.get('id')

相反，您应该观察路由器发出的变化，并做出相应的反应。

    this.route.paramMap.pipe(
      map(paramMap => paramMap.get('id')),
      switchMap(id => this.service.getProduct(id)),
    ).subscribe(prod => {
      console.log(prod)
      this.product = prod
    })

现在，每当paramMap 发生变化时，都会从中提取id，并通过服务getProduct 方法发出请求。一旦响应到达，传递给subscribe 方法的函数就会运行并更新this.product。

Answer 2

当您以编程方式将路线从 product/1 更改为 product/2 时，组件不会被重新实例化（好东西，不是吗）。所以 ngOnInit 不会再次触发。这意味着您的 this.id 不会改变，也不会进行任何 getProduct() 调用。

要解决此问题，您需要订阅参数以监听对其的任何更改。

ngOnInit() {
   this.route.paramMap.subscribe((params: ParamMap) => {
     this.id = params.get('id');
     this.service.getProduct(this.id).subscribe(prod=>{
       ...
     });
   });
}