Question

我正在进行项目，我需要知道路线是什么，并监听路线变化以检查当前路线是什么。

根据路线，我在UI上显示一些元素（或不显示）。有一些带ID的路线。例如，下一条路线在路线的两个部分中具有ID： /insights/accounts/113603894122287361289/locations/4211764274983026860。对于包含具有整个路径的对象的文件，我设置了一个属性正则表达式以与当前路径进行比较。

LOCATION_INSIGHTS: {
    id: 'LOCATION_INSIGHTS',
    route: '/insights/accounts/:accountId/locations/:locationId',
    regex: /\/insights\/accounts\/\d+\/locations\/\d+$/g,
}

所以，我这样做：

LOCATION_INSIGHTS.regex.test('/insights/accounts/113603894122287361289/locations/4211764274983026860')

返回 True

现在，有趣的事情发生在我试图进入上述路线时。第一次页面加载，它加载完全正常，我的路由匹配我的文件，所以我知道我在哪里，但是，当在同一页面上我更改同一路线上的ID时，我的事件监听器路由更改检测到更改并尝试匹配路由，但看起来路由与任何内容都不匹配，因此，UI组件未加载。

要检测路由更改，请在我的父组件上设置下一个代码：

进口

import {NavigationStart, Router, NavigationEnd, Event, NavigationError} from '@angular/router';

构造

constructor(
    private router: Router
) {
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationStart) {
            console.log('NAVIGATION START', event);
        }

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.urlAfterRedirects;
            this.matchRoute();
        }

        if (event instanceof NavigationError) {
            console.log('NAVIGATION ERROR', event);
        }
    });
}

matchRoute（）函数

private matchRoute() {
    this.matchedRoute = this.regexRoutesArray.find((route: any) => route.regex.test(this.currentRoute));
}

regexRoutesArray

ACCOUNTS: {
    id: 'ACCOUNTS',
    route: '/setup/accounts',
    regex: /\/setup\/accounts$/g
},
LOCATIONS: {
    id: 'LOCATIONS',
    route: '/setup/accounts/:accountId/locations',
    regex: /\/setup\/accounts\/\d+\/locations$/g
},
LOCATION_INSIGHTS: {
    id: 'LOCATION_INSIGHTS',
    route: '/insights/accounts/:accountId/locations/:locationId',
    regex: /\/insights\/accounts\/\d+\/locations\/\d+$/g
},
LOCATION_KEYWORD: {
    id: 'LOCATION_KEYWORD',
    route: '/keyword-report/accounts/:accountId/locations/:locationId',
    regex: /\/keyword-report\/accounts\/\d+\/locations\/\d+$/g
},
LOCATION_REVIEWS: {
    id: 'LOCATION_REVIEWS',
    route: '/insights/accounts/:accountId/locations/:locationId/reviews',
    regex: /\/insights\/accounts\/\d+\/locations\/\d+\/reviews$/g
},
REPORTS: {
    id: 'REPORTS',
    route: '/reports',
    regex: /\/reports$/g
},
REPORT_REVIEW: {
    id: 'REPORT_REVIEW',
    route: '/reports/:hash/reviews',
    regex: /\/reports\/(0x|0X)?[a-fA-F0-9]{12}\/reviews$/g
},
REPORT_COMPARISON: {
    id: 'REPORT_COMPARISON',
    route: '/reports/:hash/comparison',
    regex: /\/reports\/(0x|0X)?[a-fA-F0-9]{12}\/comparison/g
},
REPORT_INSIGHT: {
    id: 'REPORT_INSIGHT',
    route: '/reports/:hash',
    regex: /\/reports\/(0x|0X)?[a-fA-F0-9]{12}$/g
},
SETTINGS: {
    id: 'SETTINGS',
    route: '/settings',
    regex: /\/settings$/g
},
PROFILE: {
    id: 'PROFILE',
    route: '/profile',
    regex: /\/profile$/g
},
USER_LOCATIONS: {
    id: 'USER_LOCATIONS',
    route: '/locations',
    regex: /\/locations$/g
}

有关如何使用路由器事件可观察的任何建议，我有什么不做的，或者，正则表达式可能不够好

使用正则表达式Angular 5检测当前路由

0 个答案: