Angular 4 - 单击菜单上的重新加载-Java 学习之路

我们想要的网站行为是，如果用户单击其当前所在页面（路径）的菜单链接，则会重新加载页面（组件） . 所以任何形式都重置等 .

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

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

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

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

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

回复于 2024-05-02T20:18:28+08:00

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

1 回答

相关问题