Routerlink 只在第一次工作

Question

我正在尝试使用路由器link 重定向到某个产品类别。但它只在第一次起作用。尽管更改反映在 url (http://localhost:4200/product/3) 中，但页面在第二次单击 link 时仍保持静态。

路由器是{路径：'product/:prodClass'，组件：ProductPageComponent}

产品页面

此处 Console.log 第一次工作。

  prodClass!: number; 

  submenusProduct: SubMenu []= [{
    name: 'Wine',
    url: '/product/4',
  }, {
    name: 'Liquor',
    url: '/product/1',
  },{
    name: 'Beer',
    url: '/product/2',
  },{
    name: 'Foods',
    url: '/product/3',
  }];

  parentFilterSelects!:RequestBodyProduct;
  parentFilterText!:string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.prodClass = Number(this.route.snapshot.paramMap.get('prodClass')) || 0;
    console.log(this.prodClass);
  }

产品页面HTML

<app-section [submenus] = 'submenusProduct' [isCustomerPage]="false"></app-section>
<div class="container">
    <div fxLayout.gt-sm="row" fxLayout.lt-md="column">
        <app-product-filter fxFlex.gt-sm="25%" fxFlex.lt-md="25%" fxLayoutAlign="center none">
        </app-product-filter>
        <app-product-list [prodClass]='prodClass' fxFlex.gt-sm="75%" fxFlex.lt-md="75%" fxLayoutAlign="center none">
        </app-product-list>
    </div>
</div>

栏目

<div *ngIf="!isCustomerPage" class="chipList">
  <mat-chip-list *ngFor="let submenu of submenus">
    <mat-chip [routerLink]="[submenu.url]"> {{submenu.name}}</mat-chip>
  </mat-chip-list>
</div>

产品列表

public products: Product[] = [];
  @Input() prodClass!: number;

  constructor(private productService: ProductService, private filterService: FilterService) {   }

  public getProducts(requestBody: RequestBodyProduct): void {
    this.productService
      .getProducts(requestBody)
      .subscribe((response: ResponseBody) => {
        this.products = response.data;
      });
  }

 ngOnChanges() {
    let requestBody = new RequestBodyProduct(this.prodClass, 0, 0, 0, 0, 0, 'string');
    this.getProducts(requestBody);
  }

Answer 1

试试这个：

submenusProduct: SubMenu []= [{
    name: 'Wine',
    id: 4,
  }, {
    name: 'Liquor',
    id: 1,
  },{
    name: 'Beer',
    id: 2,
  },{
    name: 'Foods',
    id: 3,
  }];

在本节中：

<div *ngIf="!isCustomerPage" class="chipList">
  <mat-chip-list *ngFor="let submenu of submenus">
    <mat-chip [routerLink]="['product', submenu.id]"> {{submenu.name}} </mat-chip>
  </mat-chip-list>
</div>

更多信息在 Angular 文档 Link Routing & Navigation

的参数数组部分

并观察路线变化：

    constructor(
      .
      .
      private route: ActivatedRoute,
    ) {}

    this.route.params.subscribe(params => { 
      console.log('params: ', params);
      console.log('params.prodClass: ', params.prodClass);
    })
    // instead of: this.prodClass = Number(this.route.snapshot.paramMap.get('prodClass')) || 0;

Routerlink 只在第一次工作

Routerlink only works the first time

angular