Question

我们想要的网站行为是，如果用户点击他们当前所在页面（路线）的菜单链接，则会重新加载页面（组件）。所以任何表格都会被重置等。

我一直在阅读这不是Angular的内置行为。我一直在玩自定义的RouteReuseStrategy（例如How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2），即使没有复杂性，这种方法似乎也存在根本问题。如果单击当前页面的菜单链接，则不会调用RouteReuseStrategy的自定义实现中的任何方法，即使我单击指向其他路径的链接也会按预期调用它们。所以这让我觉得无论我在自定义RouteReuseStrategy中放入什么代码，这都将永远不会起作用，因为如果routerLink是当前路由，则不会调用它。

我还读过，应该通过在表单组件上使用一些reset（）方法来完成相同的行为（重置表单等）。这最终会出现同样的问题。也就是说，我可以用什么来检测用户是否已将routerLink点击到当前路由？

我已经尝试订阅router.events，它会再次触发路由之间的任何实际导航，但如果routerLink是当前的，则不会引发路由器事件。

点击当前活动路线的routerLink时，我可以挂钩什么？

Answer 1

1）你可以通过实现一个方法来实现这个目的，当用户通过检查当前路由是什么来点击菜单项时调用该方法。

import { Router } from '@angular/router';
export class MyComponent implements OnInit {
    currentUrl;

    constructor(private router:Router) { ... }

    ngOnInit() {
        this.currentUrl = this.router.url;
    }

    onClickMenu($event) {
        const clickedRoute = $event.target.routerlink
        // check if they match, you may need to use a different comparisson
        // depending on relative/complete paths like index of or .contains
        if (clickedRoute === this.currentUrl) {
            // clear forms or force reload
            this.myForm.reset()
        } else {
            // route to clicked rout
        }
    }
}

2）另一种选择，是在menut按钮的属性中存储表示路由的值，如值，并使用事件目标访问它，然后根据值手动路由

3）稍微复杂的方式，但更清洁和更好的做法，是在这些路线上实施路线保护，如果路线保护检查它可以重新加载表格，如果点击特定路线，阅读更多{ {3}}

Angular 4 - 单击菜单上的重新加载

1 个答案: