带有辅助路由和干净 URL 的 Angular 6 动态视图

Question

在我的 Angular 6 项目中，我有一些组件有侧边栏，有些则没有。我尝试使用辅助路由来做到这一点并且它有效，但是 URL 很难看......！

--

我做什么：

const routes: Routes = [
{
    path: 'login',
    component: LoginComponent
},
{
    path: 'search',
    component: SearchComponent
},
{
    path: 'sidebar',
    outlet: 'sidebar',
    component: SidebarComponent
}

这给了我可能的网址

https://localhost:4200/login - (login without sidebar)

https://localhost:4200/login(sidebar:sidebar) - (login with sidebar)

https://localhost:4200/search - (search without sidebar)

https://localhost:4200/search(sidebar:sidebar) - (search with sidebar)

--

期望的结果只是有 URL 的 /login 和 /search，但是带有侧边栏的搜索和不带侧边栏的登录。我怎样才能做到这一点？

辅助路线是执行此操作的正确方法吗？或者还有其他方法可以正确地做到这一点吗？

Answer 1

我在 Github 中发现了一个问题，提出了同样的问题：Auxiliary paths with Clean URL，给出的答案是提供 Angular 的UrlSerializer的自定义实现。

尝试这个：

自定义 url-serializer.ts

    import { DefaultUrlSerializer, UrlTree, UrlSerializer } from '@angular/router';

    export class CustomUrlSerializer implements UrlSerializer {
        private defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

        parse(url: string): UrlTree {
            // Manipulate the url string here as per requirement
            let newUrl = url.split('(')[0];
            let urlTree: UrlTree = this.defaultUrlSerializer.parse(newUrl);
            return urlTree;
        }

        serialize(tree: UrlTree): string {
            return this.defaultUrlSerializer.serialize(tree);
        }
    }

应用程序模块.ts：

    import { NgModule } from '@angular/core';
    import { UrlSerializer } from '@angular/router';
    import { CustomUrlSerializer } from './custom-url-serializer';

    @NgModule({
      // other properties
      providers: [
        {
          provide: UrlSerializer,
          useClass: CustomUrlSerializer
        }
      ]
    })
    export class AppModule { }

请记住，Angular 在解析 URL 时不再了解您的辅助路由，因为我们删除了它。因此，您应该通过其他方式处理它，例如使用服务来了解您所在的辅助路线或使用 queryParams 等...