具有不同参数的相同组件的 Angular 路由

Question

我有一个可以路由到自身但具有不同路由参数的组件。

正如您可能知道的那样，这不会触发 constructor 或 ngOnInit。

为了解决这个问题，我在构造函数中添加了以下内容

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
}

这解决了问题，但我意识到在使用它时我的路线变得疯狂。例如，指向完全不同路线的链接变为事件状态，当我将鼠标悬停在它上面时，它似乎已从应有的网址更改为当前网址。 (很难描述)

Answer 1

我建议采用另一种方法 - 覆盖 Angular 路由逻辑很可能容易出错(正如您已经发现的那样)，而且我相当确定您应该能够在其他更简单的方法。

一种方法是编写一个设置方法，当您需要设置(或重置)您的组件时可以调用该方法，然后订阅 ActivatedRoute 上可观察到的 params ，使用该事件调用您的设置方法 - 如下所示:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {

  setupMessage = 'not set up yet';
  someParameterValue = null;

  constructor(private activateRoute: ActivatedRoute) {
    activateRoute.params.subscribe(params => {
      this.setupComponent(params['someParam']);
    })
  }

  setupComponent(someParam) {
    this.setupMessage = 'set up at ' + new Date();
    this.someParameterValue = someParam;
  }
}

这是一个working stackblitz demo of this .