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

目前我正在尝试用Angular 9做水疗。我使用这个路由创建了一个名为products的模块localhost:4200/products，并使用这个路由查找指定的产品http://localhost:4200/products/（编号\标识\产品）

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

我不知道[routerlink]重定向是怎么回事

我的密码是

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>

{{product.title}}
{{product.description}}
看看其他产品！

两个URL（即

/products/1

和

/product/2

）匹配相同的路径定义

/products:id

。因此，当从

/products/1

移动到

/products/2

时，匹配路径保持不变，这意味着路由器使用的组件保持不变。默认情况下，不会销毁和重新渲染组件

如果您希望您的组件在不同的产品ID之间切换，您应该重构它，使其不会像在

ngOnInit

中那样只读取一次路由参数：

相反，您应该观察路由器发出的更改，并做出相应的反应

    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

，并通过service

getProduct

方法发出请求。响应到达后，传递到

subscribe

方法中的函数将运行，

此.product

将更新。

两个有问题的URL（即

/products/1

和

/product/2

）匹配相同的路径定义

/products:id

。因此，当从

/products/1

移动到

/products/2

时，匹配路径保持不变，这意味着路由器使用的组件保持不变。默认情况下，不会销毁和重新渲染组件

如果您希望您的组件在不同的产品ID之间切换，您应该重构它，使其不会像在

ngOnInit

中那样只读取一次路由参数：

相反，您应该观察路由器发出的更改，并做出相应的反应

    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

，并通过service

getProduct

方法发出请求。一旦响应到达，传递到

subscribe

方法中的函数将运行，

this.product

将更新。

当您以编程方式将路由从product/1更改为product/2时，组件不会重新启动（这是件好事，不是吗）。所以它不会再开火了。这意味着您的this.id不会更改，也不会进行任何getProduct（）调用

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

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

---

当您以编程方式将路由从product/1更改为product/2时，组件不会重新实例化（这是件好事，不是吗）。所以它不会再开火了。这意味着您的this.id不会更改，也不会进行任何getProduct（）调用

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

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

---

嵌套订阅是一种反模式，会导致内存泄漏<应使用代码>开关映射或类似运算符。嵌套的订阅是一种反模式，会导致内存泄漏<应改用代码>开关映射或类似的运算符。