Di Angular 8, saya menggunakan fungsi klik untuk menjalankan fungsi kustom onView(row) dan kemudian mencoba mengarahkan ulang ke rute anak dengan menggunakan this.router.navigate(['show/', row.id], { relativeTo: this .route }), tetapi ketika saya klik maka URL berubah http://localhost:4200/#/ pelanggan/show/1 tetapi komponen rute ini (CustomerEditComponent) tidak dimuat dan halaman web masih menampilkan konten CustomersComponent daripada menampilkan (CustomerEditComponent). Bisakah Anda membantu saya dengan cara memuat HTML CustomerEditComponent?.

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 { }
1
Imran Shabbir 6 Juni 2020, 20:53

1 menjawab

Jawaban Terbaik

Anda mendeklarasikan rute CustomerEditComponent sebagai salah satu dari CustomerComponent rute turunan, jadi Angular akan mencoba merender CustomerEditComponent di dalam CustomerComponent di mana router-outlet berada. Jika Anda tidak memiliki router-outlet di dalam CustomerComponent, itu tidak akan membuat CustmoerEditComponent.

Juga, yang ini terlihat agak aneh: { path: '', redirectTo: 'customers', pathMatch: 'full' },. Mengapa Anda membutuhkan itu? Anda harus meletakkan beberapa route yang akan mengarahkan Anda ke url Anda dengan CustomerComponent di luar CustomerComponent rute turunan.

1
KamLar 6 Juni 2020, 18:56