时间戳

首页 > 解决方案 > Angular - [routerLink] 在同一模块中重定向的问题

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

问题描述

目前我正在尝试使用 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>

标签： angulartypescriptrouterlink

解决方案

有问题的两个 URL（即/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都会从中提取，并通过 servicegetProduct方法发出请求。一旦响应到达，传递给subscribe方法的函数就会运行并this.product更新。

推荐阅读