在Angular 6中,可以使用PrimeNG的TabView组件来创建选项卡面板。要在选项卡面板之间移动时保留状态,可以使用路由器导航来实现。下面是一个示例代码:
首先,安装PrimeNG和Angular路由器:
npm install primeng --save
npm install @angular/router --save
然后,在Angular模块中导入所需的模块和组件:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabViewModule } from 'primeng/tabview';
import { AppComponent } from './app.component';
import { Tab1Component } from './tab1.component';
import { Tab2Component } from './tab2.component';
const routes: Routes = [
{ path: 'tab1', component: Tab1Component },
{ path: 'tab2', component: Tab2Component },
{ path: '', redirectTo: '/tab1', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes), TabViewModule],
exports: [RouterModule],
declarations: [AppComponent, Tab1Component, Tab2Component],
bootstrap: [AppComponent]
})
export class AppModule { }
在AppComponent中使用TabView组件:
在Tab1Component和Tab2Component中,可以添加一些内容以保留状态:
Tab 1 Content
Some content here...
Tab 2 Content
Some content here...
最后,启动应用程序并访问“http://localhost:4200”。您应该能够在选项卡之间进行导航,并保留选项卡面板的状态。