Angular router-outlet - Error: Cannot match any routes. URL

Question

我提前道歉，因为我已经看到了一些关于这个的帖子，但是尽管我尝试了很多，我还是不能解决我的问题。

我正在使用Angular 13.3.9

我尝试使用如下所述的出口路由器:https://angular.io/api/router/RouterOutlet

我的目标是根据html代码中不同位置的路由加载组件。

下面是最简单的代码:

路由器

const routes: Routes = [
{ path: 'challenge/pwd', component: ChallengePwd, outlet: 'challenge-pwd' },
{ path: 'identifier', component: Identifier, outlet: 'identifier' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<main>
<section>
<logo-loader></logo-loader>
<section class="presentation">
<router-outlet name="identifier"></router-outlet>
<router-outlet name="challenge-pwd"></router-outlet>
</section>
</section>
</main>

当我尝试访问url时http://localhost: 4201/标识符

我得到一个错误:Error: Cannot match any routes. URL Segment: 'identifier'

我还尝试在父组件中封装出口路由，像这样:

const routes: Routes = [
{
path: 'oauth',
component: MainPage,
children: [
{ path: 'challenge/pwd', component: ChallengePwd, outlet: 'challenge-pwd' },
{ path: 'identifier', component: Identifier, outlet: 'identifier' }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<router-outlet></router-outlet>

main.page.html

<main>
<section>
<logo-loader></logo-loader>
<section class="presentation">
<router-outlet name="identifier"></router-outlet>
<router-outlet name="challenge-pwd"></router-outlet>
</section>
</section>
</main>

但是没有效果，我一直得到这个错误Error: Cannot match any routes. URL Segment: 'identifier'

Answer 1

我不认为这是实现你的目标的好方法。这里有一个工作示例

首先，你需要一个主路由器，它没有名字，所以你的路由应该像这样

{ path: 'oauth', component: OauthComponent },
{ path: 'challenge-pwd', component: ChallengeComponent, outlet: 'challenge-pwd' },
{ path: 'identifier', component: IdentifierComponent, outlet: 'identifier' },

不幸的是，URL不友好，您应该尊重语法

/primaryRoute(routerOutletName:path)

所以你的URL应该是

http://localhost:4200/oauth(challenge-pwd:challenge-pwd)

Answer 2

你的正确网址是:http://localhost:4201/oauth/identifier

你设置路径到oauth这些孩子是identifier