以下是仪表板的代码,当我点击仪表板上的链接时,它会更改浏览器中的网址,但不会呈现新页面,而是保留仪表板。
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 { }
管理-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页面