我在我的应用程序中使用命名路由器在其中一个共享模块中实现路由。
这是 AppRoutingModule(root)中的配置:
const routes: Routes = [
{
path: '',
children: [
{
path: 'home',
component: HomeDetailsComponent,
},
{
path: 'call',
component: CallDetailsComponent
},
]
}
];
然后,当用户导航到第一个路径,即“/home”时,此模块有一个单独的路由模块,具有以下配置:
const curriculumRoutes: Routes = [
{
path: 'home',
component: HomeDetailsComponent,
children: [
{
path: ':id',
component: RoomDetailsComponent,
outlet: 'chapter',
}
]
},
];
对于第一个根配置,我使用主 socket 来呈现组件,对于第二个配置,我使用命名路由器“章节”。 我从主路由器导出获取的 URL 如下:
http://localhost:3000/#/home
但是进一步命名路由器导出,它是这样的:
http://localhost:3000/#/home/(chapter:2)
如何为命名的路由器 socket 设置这样的 URL:
http://localhost:3000/#/home/chapter/2
最佳答案
我做了一个解决方案,希望它能帮助别人。
UrlSerializer 的解决方案覆盖。
在这个例子中,我们像这样翻译成 aux:
parse: /instruments/ukulele => /instruments/(instruments:ukulele)
serialize: /instruments/(instruments:ukulele) => /instruments/ukulele
这样最终用户只会看到漂亮的 url:
/instruments/ukulele
UrlSerializer 的实现:
//app.rounting.ts
const routes: Routes = [
/*...*/
{
path: 'instruments', component: InstrumentsComponent,
children: [
{
path: 'ukulele',
component: UkuleleComponent,
outlet: 'instruments'
}
]
}
];
//app.module.ts
@NgModule({
/*...*/
declarations: [
/*...*/
InstrumentsComponent,
UkuleleComponent
],
/*...*/
providers: [
{
provide: UrlSerializer,
useClass: StandardUrlSerializer
}
],
/*...*/
})
//app.contants.ts
export let appContants = {
outlets: ['instruments']
};
// StandardUrlSerializer.ts
import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router';
import { appContants } from '../app.constants';
export class StandardUrlSerializer implements UrlSerializer {
private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();
parse(url: string): UrlTree {
appContants.outlets.forEach(outletName => {
const reg = new RegExp('/(' + outletName + ')/([^\/]*)');
url = url.replace(reg, '$1/($1:$2)' );
});
return this._defaultUrlSerializer.parse(url);
}
serialize(tree: UrlTree): string {
let url = this._defaultUrlSerializer.serialize(tree);
appContants.outlets.forEach(outletName => {
const reg = new RegExp('\\(' + outletName + ':([^\/]*)\\)');
url = url.replace(reg, '$1');
});
return url;
}
}
<!-- app.component.html -->
<!-- ... -->
<a routerLinkActive="active" routerLink="/instruments">Instruments</a>
<router-outlet></router-outlet>
<!-- ... -->
<!-- instruments.component.html -->
<!-- ... sub menu etc.. -->
<a class="nav-item nav-link" routerLinkActive="active" [routerLink]="[{ outlets: { instruments: ['ukulele'] } }]">Ukulele</a>
<router-outlet name="instruments"></router-outlet>
<!-- ... -->
<!-- ukulele.component.html -->
<p>ukulele works!</p>
关于angular - 在 Angular2 中使用子/辅助路由(命名路由器)时如何删除 URL 中的括号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41870911/