在Angular中,可以通过创建一个共享的组件,然后在不同的路由中重用该组件来实现在路由之间重用页面框架的目的。
首先,创建一个共享的组件,例如"PageFrameComponent":
import { Component } from '@angular/core';
@Component({
selector: 'app-page-frame',
template: `
`,
})
export class PageFrameComponent {
// 可以在这里添加共享组件的逻辑或属性
}
然后,在定义路由时,将该组件与特定的路由进行关联,如下所示:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageFrameComponent } from './page-frame.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{
path: '',
component: PageFrameComponent,
children: [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
// 其他路由配置...
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述代码中,将"PageFrameComponent"作为根路由的组件,并在子路由中定义其他页面组件。这样,每次路由切换时,"PageFrameComponent"都会保持显示,而子路由的组件则会根据路由的变化进行切换。
最后,将"PageFrameComponent"添加到需要重用页面框架的模板中,例如"app.component.html":
现在,每当路由切换时,页面框架都会保持不变,只有子路由的组件会根据路由的变化而改变。