如何根据服务响应构建子路由

Question

我想加载具有依赖解析器的不同组件，该解析器在子路由中具有相同的路径值

家长：

 path: 'test',
 loadChildren: () => 
   import('./myRoutingModule').then(
     (m) => m.myDynamicRoutes),

孩子：

    export const myDynamicRoutes: Routes = buildMyRoutes();

    export function buildRoutes(): Route[] {
    var version =  inject(myService);
    if (version === 1) {
        return [
            {
                path: '',
                component: oneComponent,
                resolve: {
                    initData: oneResolver,
                },
            },
        ];
    } else if (version === 2) {
        return [
            {
                path: '',
                component: twoComponent,
                resolve: {
                    initData: twoResolver,
                },
            },
        ];
}

我不允许在这里使用注入，有什么方法可以使用吗？是否有更好的替代方案来动态设置路线。我正在使用 Angular 17 独立组件

Answer 1

据我所知，路由不是动态的，它只运行一次，所以你需要使用

CanMatchFn

来处理这种情况，以便根据标志有条件地允许访问路由！

export const myDynamicRoutes: Routes  = [
        {
            path: '',
            component: oneComponent,
            canMatch: [CanMatchRoute],
            resolve: {
                initData: oneResolver,
            },
            data: { version: 1 },
        },
        {
            path: '',
            component: twoComponent,
            canMatch: [CanMatchRoute],
            resolve: {
                initData: twoResolver,
            },
            data: { version: 1 },
        },

可以激活可以包含注入并有条件地进行路由！

const canMatch: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
    var service =  inject(myService);
    return route?.data?.version === service?.version;
};