Angular 匹配器 children 不工作

Question

我想实现一些 url，比如 "domain/username/timeline"。用户名是 "string.string" 所以我使用 UrlSegment 来匹配使用正则表达式的字符串。现在，当我导航到 "domain/username" 时，它可以工作，但是当我导航到 "domain/username/settings" 时，它根本不起作用。

欢迎任何帮助。如果有类似的做法，我欢迎。

这是我的 app-routing 模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes, UrlSegment, UrlMatcher, UrlMatchResult } from '@angular/router';
import { TimelineComponent } from './components/profile/timeline/timeline.component';
import { AboutComponent } from './components/profile/about/about.component';
import { FollowersComponent } from './components/profile/followers/followers.component';

export function userMatch (url: UrlSegment[]): UrlMatchResult{
    if (url.length === 1) {
        if (url[0].path.match(/^[a-z]*\.[a-z0-9_]*$/)) {
            return ({
                    consumed: url
            });
        } else {
            return null;
        }
    } else if(url.length === 2) {
        if (url[0].path.match(/^[a-z]*\.[a-z0-9_]*$/)) {
            return ({
                    consumed: url, 
                    posParams: {timeline: url[1], about: url[1], settings: url[1] }
            });
        } else {
            return null;
        }       
    }
}

const appRoutes: Routes = [
    /**
     * @route `PROFILE` 
     * @lock `CanActivate`
     *  Only if logged in can access this page
     */
    {
        matcher: userMatch, 
        component: ProfileComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', component: TimelineComponent },
            { path: 'timeline', component: TimelineComponent },
            { path: 'about', component: AboutComponent },
            { path: 'settings', component: SettingsComponent }
        ]
    }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})export class AppRoutingModule { }

Answer 1

见https://github.com/angular/angular/issues/23866 您应该 return 在消耗的参数中使用 url.

的段

例如：您不会匹配 url (/categories/categoryId) 的第一段和第二段 url: /categories/categoryId/产品数学函数：

export function categoryMatcher(url: UrlSegment[]) {
  return url.length === 3 ? ({consumed: url.slice(0,2)}) : null;
}

Angular 匹配器 children 不工作

Angular matcher children not working

angular-routing

angular