强制routerlink刷新组件答案

【问题标题】：Force routerlink to refresh component强制routerlink刷新组件
【发布时间】：2018-07-04 21:38:59
【问题描述】：

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

我有一个始终显示的左侧菜单（它是带有引导程序的 asp.net core2.0 mvc 项目骨架的一部分）。

我在这个菜单中创建了 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 重新加载组件。

谢谢

【问题讨论】：

标签： angular

【解决方案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

【讨论】：

【解决方案2】：

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

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

constructor(private router: Router){
     // override the route reuse strategy
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
     }

     this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
           // trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated = false;
           // if you need to scroll back to top, here is the right place
           window.scrollTo(0, 0);
        }
    });
}

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

【讨论】：

【解决方案3】：

使用

ngOnInit(): void {
   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

【讨论】：