Question

我创建了一个非常基本的角度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的调用。如果我点击另一个加载另一个组件的链接，然后返回到第二个链接，它就会起作用。

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

由于

Answer 1

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

在我的应用程序中，我使用类似的东西：

constructor(private route: ActivatedRoute) { }

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

此代码捕获对route参数的更改并导致每次路由参数更改时都执行getMovie方法。

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

Answer 2

Deborah 的答案最适合您的情况，我们只需在 queryParams 中查找更改。

对于其他任何人，如果您的项目确实需要像我一样重新渲染组件（也许您需要调用 ngOninit 来重新评估某些内容），则可以使用

function removeFromLocalStorage(pizzaId) {
  var locStore = JSON.parse(localStorage.getItem("selectedProduct"));
  var cartRowContents = locStore.filter((item) => item.productID !== pizzaId);
  localStorage.setItem("selectedProduct", JSON.stringify(cartRowContents))
}

我找到解决方案的讨论主题：https://github.com/angular/angular/issues/13831

强制routerlink刷新组件

2 个答案: