在浏览器中显示所需的路线 URL

Question

我的主模块路由中有这样的路由。

    const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full',
    },
    {
        path: 'home',
        component: MainComponent,
        children: [
            {
                path: '',
                loadChildren: () => import('../HR/human-resources.module').then(m => m.HumanResourcesModule),
            }
        ]
    }];

在人力资源中-routing.module.ts我有这样的路线。

    const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: QuestionGroupComponent
            },
            {
                path: 'reports',
                component: DatePeriodComponent
            },
            {
                path: 'states',
                component: StateWithTopPersonnelComponent
            },
            {
                path: 'personnel',
                component: StatePersonnelComponent
            },
            {
                path: 'personnel-detail',
                component: PersonnelDetailComponent
            }
        ]
    }];

例如，现在当我想去 DatePeriodComponent 时，我有一个像这样的 URL http://localhost:4200/home/reports 但有些东西我想展示的有点不同。我想像这样 http://localhost:4200/reports 显示 URL 我所有的溃败都没有家。我怎样才能忽略它或防止在 URL 中显示？

Answer 1

我认为解决这个问题的方法是使用自定义 UrlSerializer。

DefaultUrlSerializer 是 UrlSerializer 的默认实现，例如，Router.parseUrl() 方法使用它：

urlTree = this.urlSerializer.parse(url);

或当setting the browser's URL（这可能是您的问题所需要的）：

private setBrowserUrl(
      url: UrlTree, replaceUrl: boolean, id: number, state?: {[key: string]: any}) {
    const path = this.urlSerializer.serialize(url);
    state = state || {};
    if (this.location.isCurrentPathEqualTo(path) || replaceUrl) {
      // TODO(jasonaden): Remove first `navigationId` and rely on `ng` namespace.
      this.location.replaceState(path, '', {...state, navigationId: id});
    } else {
      this.location.go(path, '', {...state, navigationId: id});
    }
  }

A URL 是 UrlTree 的序列化版本。因此，UrlTree 是 URL 的反序列化版本。 DefaultUrlSerializer 使用 UrlParser 反序列化 URL 字符串：

  parse(url: string): UrlTree {
    const p = new UrlParser(url);
    return new UrlTree(p.parseRootSegment(), p.parseQueryParams(), p.parseFragment());
  }

所以你可以做的是提供 UrlSerializer:

的自定义实现来解决这个问题

// In `providers` array
{ provide: UrlSerializer, useClass: CustomImplOfUrlSerializer },

一个可能的（和基本的）实现可以是使用 CustomImplOfUrlSerializer.serialize(urlTree) 中 DefaultUrlSerializer.serialize(urlTree) 的返回值，通过将 /home 替换为 '':

class CustomImplOfUrlSerializer implements UrlSerializer {
  serialize (urlTree: UrlTree): string {
    const raw = (new DefaultUrlSerializer()).serialize(urlTree);

    return raw.replace('/home', '')
  }
}

此外，如果您想了解更多关于 UrlTree 的信息以及它为什么有用，我建议您查看 this article。

Answer 2

这是我见过的最简单的方式，我现在是全世界最愤怒的人... 我这样做是通过设置一个空字符串来加载默认模块和组件。我将仪表板模块视为我的默认模块，将仪表板组件视为我的默认组件。现在，当应用程序出现时，我可以看到这个 URL http://localhost:4200

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
            },
            {
                path: 'HR',
                loadChildren: () => import('../HR/human-resources.module').then(m => m.HumanResourcesModule),
            },
        ]
    },
   
];

在我的仪表板模块中

const routes: Routes =
    [
        {
            path: '',
            canActivate: [AuthGuard],
            component: DashboardComponent
        },
    ];

在浏览器中显示所需的路线 URL

desired route display in browser URL

routes

url-routing

angular2-routing

angular