Javascript 角度：Can'；t使用UrlMatcher导航到子路由

前言： 我的URL策略的一部分有一个可选参数。也就是说，URL路径可以以区域代码和语言代码开头，也可以仅以语言代码开头。然后，这些代码按实际的应用程序路径执行

/us/eng --> Home page
/us/eng/about-us --> About Us page
/eng/about-us --> About Us page

我正在尝试使用UrlMatcher来完成URL中可选区域代码的匹配

我的问题是，总是显示主页。它从不显示关于我们的页面或任何其他子路径

部分应用程序路由.ts

export function baseRouteMatcher(url: UrlSegment[]) {
    const posParams: { [key: string]: UrlSegment } = {};
    const consumed: UrlSegment[] = url;
    if (url[0].path.length === 2 && url[1].path.length === 3) {
        posParams.region = url[0];
        posParams.lang = url[1];
    } else if(url[0].path.length === 3) {
        posParams.region = new UrlSegment('world', {});
        posParams.lang = url[0];
    }
    return ({consumed, posParams});
}

export const appRoute = {
    name: 'app',
    matcher: baseRouteMatcher,
    children: [
        { path: 'terms-of-service', component: ContentComponent },
        { path: 'privacy-policy', component: ContentComponent },
        { path: 'about-us', loadChildren: './about-us/about-us.module#AboutUsModule' },
        { path: '', component: HomeComponent },
    ]
};

---

很可能我完全误解了UrlMatcher的功能。很难找到复杂的例子。感谢您的帮助

这是真的。我不明白UrlMatcher是怎么工作的。发生了两件事：

每次运行matcher函数时，我都会使用部分url（而不是在不需要时返回null）

每次运行matcher函数时，我也会消耗所有的段，而不仅仅是我需要消耗的部分。这导致每次都会获得

HomeComponent

以下是工作代码：

export function baseRouteMatcher(segments) {

    // If we don't have any segments
    if (!segments[0]) {
        return null;
    }

    // If we only have a language, consume just the first segment
    // Else if we have a region and a language, consume first two segments
    if (segments[0].path.length === 3) {
        return { consumed: segments.slice(0, 1), posParams: { region: 'world', lang: segments[0].path } };
    } else if (segments[0].path.length === 2 && segments[1].path.length === 3) {
        return { consumed: segments.slice(0, 2), posParams: { region: segments[0].path, lang: segments[1].path } };
    }

    // The segments don't contain a region or language, don't consume anything
    return null;
}

---

您可以为不同的路径制作两个不同的匹配器

{matcher:languageMatcher,component:AboutUs},
{matcher:homePageMatcher,component:HomePage},

有关更多信息，请阅读本博客：