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

问题描述

当前，我尝试使用Angular 9进行SPA。我使用此路由localhost：4200 / products创建了一个名为product的模块，并使用此路由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>

解决方法

有问题的两个网址（即/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更新。

当您以编程方式将路线从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=>{
       ...
     });
   });
}

angular angular routerlink typescript typescript typescript