Angular Routing:每当我刷新页面或手动键入特定URL时，Angular都会重定向回父路由

Question

我有一个CRM模块，我在其中定义了自己的CRM路由模块，如下所示：

const routes: Routes = [
{
path: 'crm',
component: CrmComponent,
children: [
{ path: '', redirectTo: 'companies', pathMatch: 'full' },
{ path: 'companies', component: CompanyListComponent },
{ path: 'contacts', component: ContactListComponent },
{
path: 'companies/new',
component: CompanyEditComponent,
canDeactivate: [CanDeactivateGuardService],
},
{
path: 'contacts/new',
component: ContactEditComponent,
canDeactivate: [CanDeactivateGuardService],
},
{
path: 'companies/edit/:id',
component: CompanyEditComponent,
canDeactivate: [CanDeactivateGuardService],
},
{
path: 'contacts/edit/:id',
component: ContactEditComponent,
canDeactivate: [CanDeactivateGuardService],
},
{
path: 'companies/view/:id',
component: CompanyComponent,
children: [
// { path: '', redirectTo: 'details', pathMatch: 'full' },
{ path: '', component: CompanyEditComponent },
{ path: 'documents', component: CompanyDocumentsComponent },
{
path: 'related-contacts',
component: CompanyRelatedContactsComponent,
},
],
},
{
path: 'contacts/view/:id',
component: ContactComponent,
children: [
{ path: '', component: ContactEditComponent },
{
path: 'related-products',
component: ContactRelatedProductsComponent,
},
{
path: 'related-raw-materials',
component: ContactRelatedRawMaterialsComponent,
},
],
},
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class CRMRoutingModule {}

所以，每当我试图手动编写URL以查看特定公司或联系人/crm/companies/view/123的详细信息时？viewDetails=true它将我重定向回/crm。

每当我在子路由上并尝试刷新它时，也会发生同样的情况，它会将我重定向回/crm。

我试着改变路线的顺序，但无济于事。提前谢谢！

编辑：也许我没有正确地构建我的帖子，让它有点不够，我已经放置了所有这些组件，它们加载了。然而，如果我试图手动键入某个公司或联系人的地址，它会将我重定向回CrmComponent(在本例中为root(，每当我在子组件中并重新加载页面时，都会发生同样的情况，它只是将我重定向回来，我不知道为什么

编辑：我已经解决了这个问题，对于将来可能遇到它的任何人，请检查您的标签是否同时具有点击侦听器或路由器链接，即使用户没有点击，由于某种原因，页面之间的路由也会中断。

Answer 1

Hi在需要添加的每个子组件中--

<router-outlet></router-outlet>

这意味着您需要添加CrmComponent、CompanyComponent、ContactComponent。如果不添加angular，则不知道在哪里添加子零部件。因此，它总是加载到第一个路径组件，即CrmComponent。

我创建了一个示例，请查看并让我知道它是否有用https://stackblitz.com/edit/angular-ivy-gr5qgx?file=src%2Fapp%2Fcompany%2Fcompany.component.html

Answer 2

我已经解决了这个问题，对于将来可能遇到它的任何人，请检查您的标签是否具有click listener或router链接，并且没有同时具有这两个链接，即使用户没有单击，由于某种原因，页面之间的路由也会中断。