路由没有在 Angular 中使用不同的 id 刷新 - JavaScript

介绍

在 Angular 中，路由器被用来管理一个单页应用程序的不同视图和状态。当用户从一个视图切换到另一个视图时，路由器会调用相应的组件来呈现新的视图。

然而，如果你正在使用例如 ActivatedRoute 来获取 URL 中的路由参数时，你可能会遇到一个问题：如果你在同一个组件中导航到一个具有不同参数的路由，你将无法刷新该组件。这是因为当你使用相同的组件 ID 导航时，Angular 不会重新创建组件实例，而只会更新路由参数。

在本文中，我们将探讨如何解决这个问题，以及如何在路由导航时使用不同的组件 ID。

解决方案

要解决这个问题，我们需要让 Angular 在每次导航时都创建一个新的组件实例。为此，我们可以使用路由器的 onSameUrlNavigation 属性，并将其设置为 'reload'。这样，当用户在同一个路由上导航时，Angular 将会重新加载组件。

下面是一个示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      // Do something with the params
    });

    // Reload component on same URL navigation
    this.router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe(() => this.ngOnInit());
  }
}

在这个示例中，我们订阅了路由参数，并在每次参数更改时执行了一些操作。我们还使用了 router.events 来订阅路由器导航结束事件，并在该事件发生时重新加载组件。

注意，这种方法可能会导致性能问题，因为每次导航都会重新创建组件。因此，你应该仅在必要时使用它。

在路由导航时使用不同的组件 ID

如果你希望在路由导航时使用不同的组件 ID，则可以通过以下方法之一实现：

1. 使用 router.navigate 方法而不是 routerLink 指令来导航。这样，你可以指定一个完整的 URL，包括组件 ID。例如：

this.router.navigate(['/my-route', { componentId: 'my-component1' }]);

2. 在路由配置中使用动态路由参数来指定组件 ID。例如：

const routes: Routes = [
  {
    path: 'my-route/:componentId',
    component: MyComponent
  }
];

然后你可以使用以下方法导航：

this.router.navigate(['/my-route', 'my-component1']);

或者，如果你希望在 HTML 模板中使用路由链接：

<a routerLink="/my-route/my-component1">My Component 1</a>

结论

在 Angular 中，我们可以使用路由器来管理不同视图和状态。但是，在某些情况下，如果我们要重新加载组件或使用不同的组件 ID，我们需要采取一些额外的步骤。

通过使用 onSameUrlNavigation 属性并将其设置为 'reload'，我们可以让 Angular 在每次导航时重新加载组件。使用 router.navigate 方法或动态路由参数来指定组件 ID 可以帮助我们在导航时使用不同的组件 ID。