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

发布于05月09日

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

parent:

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

child:

    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,
                },
            },
        ];
}

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

推荐答案

据我所知，路由不是动态的，只运行一次，因此您需要使用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;
};