Angular 路由：Angular 每当我刷新页面或手动输入特定内容时，都会重定向回父路由 URL

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。

我尝试更改路线的顺序，但是没有帮助。提前致谢！

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

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

Answer 1

您好，您需要在每个子组件中添加 --

<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

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

Angular 路由：Angular 每当我刷新页面或手动输入特定内容时，都会重定向回父路由 URL

Angular Routing: Angular redirects back to the parent route whenever I refresh the page or manually type specific URL

angular

typescript

angular2-routing

angular-routing