根据我对Angular2路由器文档的理解,路由配置默认pathMatch策略是“prefix”, “prefix”pathMatch策略意味着app路由器只需要查看url的开头并将其与正确的路由匹配。
参考:https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#matching-strategy
话虽如此,通过以下配置,如果我导航到ExampleComponent
,我会假设此路线应加载/abcdefg
。
这不起作用的一个问题,我不确定有什么问题,我无法在谷歌或@angular/router
源代码中找到有关此内容的更多信息。
感谢您的帮助。
const ROUTES: Routes = [
{ path: '', component: MainLayoutComponent, pathMatch: 'prefix', canActivate: [AuthGuard], children: [
{ path:'abc', pathMatch: 'prefix', component: ExampleComponent},
{ path: '', component: HomepageComponent }
]},
];
export const ROUTING = RouterModule.forRoot(ROUTES, { useHash: false });
更新#1,尝试GünterZöchbauer建议。
新的路由器配置是:
现在/abc/defg
有效,但不是/abcdefg
{ path:'abc', pathMatch: 'prefix',
children: [
{ path:'**', component:ExampleComponent},
]
}
答案 0 :(得分:4)
如果您的path: 'abc'
路线的子路线包含path: 'defg'
或path: '**'
或path: 'de'
且子路线的路线为path: 'fg'
,则可以使用此功能。
pathMatch: 'full'
表示整个URL路径需要匹配并由路由匹配算法使用。
pathMatch: 'prefix'
表示选择路径与URL开头匹配的第一条路由,但路由匹配算法正在继续搜索其余URL匹配的匹配子路由。
答案 1 :(得分:1)
问题是你在说:
{ path: '', component: MainLayoutComponent, pathMatch: 'prefix'
基本上说:
查找任何以空格开头的网址(''),简单来说,所有网址始终都没有。
考虑此网址/google
或此网址
如果你运行一个正则表达式,并说这些网址与''匹配,是的,是的。
除非你说起始(^)
和结尾($)
位也应该匹配,在这种情况下,start和两者匹配,但结尾只会匹配空url。
这就是他们创建full
前缀的原因,也就是说,网址应完全匹配。
答案 2 :(得分:0)
所以,有人问我是如何解决这个问题的,
首先我添加了一条新路线作为所有其他路线的后备,如下所示:
{path: ':url', loadChildren: './fallback/fallback.module#FallbackModule'}
然后在fallbackComponent内部,我们根据路由器导航结束事件上的url决定加载哪个模块。
在我的情况下,如果url是/ @ somestring,我想加载profileComponent并调用一些API
ngOnInit() {
this.router.events.filter(event => event instanceof NavigationEnd)
.subscribe((event) => {
this.parseUrl(this.router.url);
});
}
parseUrl(url: string) {
let data = {};
let parts: string[] = url.split('/');
parts = parts.filter((item) => !!item);
if (parts[0] && parts[0].indexOf('@') === 0) {
data['component'] = 'profile';
data['username'] = parts[0].replace('@', '');
}
this.viewData = data;
}
并在模板中:
<template [ngIf]="viewData && viewData['component'] == 'profile'">
<user-profile
[title] = "viewData['view']"
[username] = "viewData['username']"
></user-profile>
</template>
另外值得一提的是,我们还必须覆盖DefaultUrlSerializer.serialize以禁用网址中特殊字符(@)的自动编码。