到具有不同参数的相同组件的角形路线

Question

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

您可能知道这不会触发constructor或ngOnInit。

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

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

这解决了问题，但是我意识到我的路线在使用时会发疯。例如，指向完全不同的路由的链接变为活动状态，当我将鼠标悬停在该链接上时，它似乎已从url更改为当前URL。（难以描述）

Answer 1

我建议使用另一种方法-覆盖Angular路由逻辑可能容易出错（如您已经发现的那样），并且我相当确定您应该能够用其他更简单的方法实现目标方法。

一种方式是写一个设置方法，当你需要设置你可以致电（或重置）组件，然后订阅的params观察到的ActivatedRoute，使用该事件来调用你的设置方法-就像这样：

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;
  }
}

这是对此的有效工作演示。