angular - 强制 routerlink 刷新组件

Question

我创建了一个非常基本的 Angular 5 应用程序。

我有一个始终显示的左侧菜单(它是带有 Bootstrap 的 asp.net core2.0 mvc 项目 skelton 的一部分)。

我在此菜单中创建了 2 个链接:

          <li>
            <a [routerLink]='["/component/1"]'>Component 1</a>
          </li>
          <li>
            <a [routerLink]='["/component/2"]'>Component 1</a>
          </li>

如您所见，这 2 个链接指向相同的路径(相同的组件)。我们只有改变的 id。这是 app.module.ts 中的路线

  { path: 'component/:id', component: MyComponent, pathMatch: 'full' },

我在我的组件 typescript 类中添加了一些日志:

constructor()
{
    console.log("constructor");
}

ngOnInit()
{
    console.log("ngOnInit");
}

如果我点击第一个链接，一切正常。但是如果我点击第二个链接，我的组件不会重新加载。没有调用构造函数或 ngOnInit。如果我单击加载另一个组件的另一个链接，然后返回到第二个链接，它会起作用。

我想做的是，当我单击指向与实际显示的组件相同的组件的链接时，如何强制 Angular 重新加载组件。

谢谢

Answer 1

通常在这种情况下，您不会重新加载组件。相反，您需要观察所需路由参数的变化并相应地进行。

在我的应用程序中，我使用这样的东西:

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getMovie(id);
        }
    );
}

此代码捕获路由参数的任何更改，并导致每次路由参数更改时执行我的 getMovie 方法。

有关完整示例，请查看:https://github.com/DeborahK/MovieHunter