路由器导航 link 创建成功但组件未在 angular 8 中呈现

Question

在 Angular 8 中，我使用点击函数运行自定义函数 onView(row) 然后尝试使用 this.router.navigate(['show/', row.id], { relativeTo: this.route }), 但是当我点击然后 URL 改变 http://localhost:4200/#/customers/show/1 但是这个路由组件 (CustomerEditComponent) 没有加载并且网页仍然显示 CustomersComponent 内容而不是显示 (CustomerEditComponent)。你能帮我看看如何加载 CustomerEditComponent 的 HTML 吗？

onView(row){
   this.router.navigate(['show/' , row.id], { relativeTo: this.route }).then( (e) => {
      if (e) {
        console.log("Navigation is successful!");
      } else {
        console.log("Navigation has failed!");
      }
    });
  }

customers-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomersComponent } from "./customers.component";
import { CustomerEditComponent } from "./customer-edit/customer-edit.component";

const routes: Routes = [
  {
    path: '',
    component: CustomersComponent,
    children: [
        { path: '', redirectTo: 'customers', pathMatch: 'full' },
        {
          path: 'show/:id',
          component: CustomerEditComponent,
          data: {
            title: 'Customer'
          }
        }
      ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CustomersRoutingModule { }

admin-layout.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomerEditComponent } from "../../../pages/admin/customers/customer-edit/customer-edit.component";

const adminLayoutRoutes: Routes = [
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    },
    {
        path: 'dashboard',
        loadChildren: () => import('../../../pages/admin/dashboard/dashboard.module').then(m => m.DashboardModule)
    },
    {
        path: 'customers',
        loadChildren: () => import('../../../pages/admin/customers/customers.module').then(m => m.CustomersModule)
    },

    {
        path: 'contacts',
        loadChildren: () => import('../../../pages/admin/contacts/contacts.module').then(m => m.ContactsModule)
    },
    {
        path: 'administrators',
        loadChildren: () => import('../../../pages/admin/administrators/administrators.module').then(m => m.AdministratorsModule)
    },
    {
        path: 'orders',
        loadChildren: () => import('../../../pages/admin/orders/orders.module').then(m => m.OrdersModule)
    },
    {
        path: 'institutions',
        loadChildren: () => import('../../../pages/admin/institutions/institutions.module').then(m => m.InstitutionsModule)
    },
    {
        path: 'service-desk',
        loadChildren: () => import('../../../pages/admin/service-desk/service-desk.module').then(m => m.ServiceDeskModule)
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(adminLayoutRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AdminLayoutRoutingModule { }


  [1]: https://i.stack.imgur.com/JPzoe.png

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {
  AuthGuardService as AuthGuard,
  UnauthGuardService as UnauthGuard,
  AdminLayoutComponent
} from './core';

const routes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./core/layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
      }
    ],
    canActivate: [AuthGuard]
  }, {
    path: 'login',
    loadChildren: () => import('./pages/auth/login/login.module').then(m => m.LoginModule),
    canActivate: [UnauthGuard]
  }, {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true
    })
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Answer 1

您将 CustomerEditComponent 路线声明为 CustomerComponent 子路线之一，因此 Angular 将尝试在 CustomerComponent 内呈现 CustomerEditComponent，其中 router-outlet 是。如果 CustomerComponent 中没有 router-outlet，它将不会呈现 CustmoerEditComponent。

此外，这个看起来有点奇怪： { path: '', redirectTo: 'customers', pathMatch: 'full' },。你为什么需要那个？你应该放一些 route ，它会将你重定向到你的 url with CustomerComponent 在 CustomerComponent 子路由之外。

路由器导航 link 创建成功但组件未在 angular 8 中呈现

router navigation link is created successfully but component is not rendered in angular 8

angular

angular8