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

这里是working stackblitz demo of this。

Answer 2

更改shouldReuseRoute函数以仅返回false可能是导致问题的原因。你可以试试看。

  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    return curr.routeConfig === null && future.routeConfig === null;
  }

事实上，您重新实现了RouteReuseStrategy类。遇到了类似的问题，并获得了github的帮助，但不幸的是我忘了链接。

这就是它的样子。

customReuseRouteStrategy.ts

import {
  ActivatedRouteSnapshot,
  DetachedRouteHandle,
  RouteReuseStrategy
} from "@angular/router";

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(
    route: ActivatedRouteSnapshot,
    detachedTree: DetachedRouteHandle
  ): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return null;
  }
  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    return curr.routeConfig === null && future.routeConfig === null;
  }
}

然后在模块提供程序中，将RouteReuseStrategy替换为刚创建的类。

yourmodue.module.ts

 providers: [
    {
      provide: RouteReuseStrategy,
      useClass: CustomRouteReuseStrategy
    }
  ]

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

2 个答案: