Ниже приведен код для панели инструментов. Когда я нажимаю на ссылки на панели инструментов, она изменяет URL-адрес в браузере, но не отображает новую страницу, и вместо этого панель инструментов остается.
app.routing.ts
import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: '',
component: AdminLayoutComponent,
children: [
{
path: '',
loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
}
]
}
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
],
})
export class AppRoutingModule { }
admin-layout.routing.ts
import { Routes } from '@angular/router';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { UserProfileComponent } from '../../user-profile/user-profile.component';
import { NotificationsComponent } from '../../notifications/notifications.component';
import { AboutComponent } from '../../about/about.component';
import { CatalogComponent } from '../../pxsbaas-catalog/pxsdbaas-catalog.component';
import { FormComponent } from '../../pxsbaas-catalog/standalone-form/standalone-form.component'
export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent ,
children: [
{path: 'about', component: AboutComponent},
{path: 'pbxbaasCatalog', component: CatalogComponent,
children: [
{path: 'Form', component: FormComponent }
]
},
],
},
{ path: 'user-profile', component: UserProfileComponent },
{ path: 'notifications', component: NotificationsComponent }
];
Ниже приведен HTML-код компонента панели мониторинга:
<a [routerLink]="['Form']">
<div class="card-header card-header-icon">
<h4 class="card-title">request form</h4>
</div>
</a>
<a [routerLink]="['about']">
<div class="card-header card-header-icon">
<h4 class="card-title">go to about page</h4>
</div>
</a>
<a [routerLink]="['pbxbaasCatalog']">
<div class="card-header card-header-icon">
<h4 class="card-title">go to catalog page</h4>
</div>
</a>
В приведенном выше html, когда я нажимаю на ссылки маршрутизатора в браузере, он изменяет URL-адрес как / dashboard / about или / dashboard / Form или / dashboard / pbxbaasCatalog, но не отображает html-страницу их соответствующих компонентов.