Angular 4 - 重新加载菜单点击

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）另一种选择，将表示路由的值存储在菜单按钮上的属性中，如值，并通过事件目标访问它，然后根据值手动在方法中路由

3) 一种稍微复杂一点但更简洁更好的做法是在这些路由上实施路由保护，如果路由保护进行检查，如果单击特定路由，它可以重新加载表单，阅读更多@ 987654321@