角度相对路由不能正常工作

Question

我使用angular开发了一个应用程序。在我的应用程序中有两种路径:

1型:

• http://localhost:4203/121/index(121是商家id)
• http://localhost: 4203/121/比尔/tci
• http://localhost: 4203/121/比尔/mci
• http://localhost: 4203/121/资料/仪表盘
2型:

• http://localhost:4203/index(默认没有商家id)
• http://localhost: 4203/比尔/tci
• http://localhost: 4203/比尔/mci
• http://localhost: 4203/资料/仪表盘

所以我在app-routing Module中做了以下代码:

export const routes: Routes = [
{
path: 'profile',
loadChildren: () => import('./pages/profile/profile.module')
.then(m => m.ProfileModule),
},
{
path: ':mid/profile',
loadChildren: () => import('./pages/profile/profile.module')
.then(m => m.ProfileModule),
},
{
path: 'bill',
loadChildren: () => import('./pages/bill/bill.module')
.then(m => m.BillModule),
},
{
path: ':mid/bill',
loadChildren: () => import('./pages/bill/bill.module')
.then(m => m.BillModule),
},
{
path: 'index',
component: IndexComponent,
},
{
path: ':mid/index',
component: IndexComponent,
},
{
path: 'auth-callback',
component: AuthCallBackComponent,
},
{ path: '', redirectTo: 'index', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' },
];

我在另一个项目上创建了一些库组件，并将其添加到这个项目中。下面是我的card组件:

<div class="solution_card">
<a [routerLink]="defaullink">
<div class="hover_color_bubble"></div>
<a *ngFor="let icon of defaultMenu.icons" [routerLink]="icon.link" class="float-start icons">
<i [class]="icon.title"></i>
</a>
<div class="so_top_icon">
<img [src]="defaultMenu.img" />
</div>
<div class="solu_title">
<h3>{{defaultMenu.title}}</h3>
</div>
<div class="solu_description">
<p>
{{defaultMenu.subTitle}}
</p>
</div>
</a>
</div>

在组件模块中，我定义了默认链接:

public defaullink:string = '../test2';
public defaullink2:string = '../123231321';

当我在我的项目中使用这个组件时，我期望的结果如下:

(我把组件放到index.html.ts)

• in Page: http://localhost:4203/121/index ===>链接到:http://localhost:4203/121/test2
• in Page: http://localhost:4203/index ===>链接到:http://localhost:4203/test2

但在这两种页面链接:http://localhost: 4203/test2

请帮帮我

Answer 1

您是否可以尝试修改链接字符串路径以删除开头的../并替换为./?

public defaullink:string = './test2';
public defaullink2:string = './123231321';

您可能试图将页面更改为与调用者相同级别的页面，因此您只需要./

我也看到你在一个组件中使用它(它可以在不同的页面级别)，所以最好使用绝对路径，因为它可以满足你的需要，只用/

作为前缀

public defaullink:string = '/test2';
public defaullink2:string = '/123231321';

您也可以查看以下文档:https://angular.io/api/router/RouterLink#relative-link-paths

UrlMatcher

我认为你也没有包括索引页没有索引后缀的路由，如:

{
matcher: (url) => {
if (url.length === 1 && url[0].path.match(/^[d]+$/gm)) {
return {
consumed: url,
mid: new UrlSegment(url[0].path.substr(1), {})
};
}
return null;
},
component: IndexComponent
},
...

在路由上使用匹配器(它必须在其他可能的匹配路径之上)可以过滤一些正则表达式或其他检查。如果找到匹配，它将返回路由对象;如果路由器需要继续对下一个对象求值，它将返回空值。UrlMatcher医生