Question

我能够使用此路由

以角度使用多个路由器插座

const appRoutes: Routes = [
    { path: '', component: HomeComponent, outlet: 'main' },
    { path: 'product', component: ProductDetailComponent, outlet: 'main' },
    { path: 'chat', component: ChatComponent, outlet: 'chat' }
  ]  ;

并在组件html中

<button
  [routerLink]="['/', {outlets: {'chat': ['chat']}}]">
  Chat
</button>

<button
  [routerLink]="['/', {outlets: {'main': ['product']}}]">
  main
</button>

<router-outlet name="main"></router-outlet>

 <router-outlet name="chat"></router-outlet>

export const AppRouting = RouterModule.forRoot(appRoutes);

它可以很好地完成，就像你在这个吸管中看到的那样

https://plnkr.co/edit/r8Vb9zktJblD2nNUXiBz?p=preview

但是，这些路线的网址就像

本地主机：4200 /（聊天：聊天//主：产物）

看起来很脏，我觉得在真实的网站上使用不好

无论如何要以任何方式清理此网址，以便它看起来像一个普通的网址，仍然使用多个路由器插座？如果不是可以在真实的网站上使用这种网址吗？

Answer 1

您可以使用＆＃39; skipLocationChange＆＃39;来禁用任何路由器链接的路径更改/重写。属性：

 router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

或

<a [routerLink]="..." skipLocationChange>click me</a>

您甚至可能完全使用运行时配置选项禁用路径修改，我不确定。您可以尝试不提供“位置”。和PathDocationStrategy＆＃39;，但我感觉路由器会在没有它的情况下抛出异常。角度路由器有点让我疯狂，所以我开始写一个服务来做我自己的路径管理。而这转变为编写一个全新的路由器。：P

我不相信其他评论者所说的是真的。 URL栏中的路径只是路由器放置的值。它不存储任何信息，信息全部存储在控制服务中。它只是一个输出基本上。您可以随意修改它，只要您确保正确配置您的网络服务器，这样您就不会在非主页上刷新404页面。

多个路由器插座的清洁网址

1 个答案: