在Angular 6中,可以使用Angular Material标签导航与辅助路由来实现多标签页的导航。下面是一个包含代码示例的解决方法:
npm install --save @angular/material @angular/cdk @angular/animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
imports: [
BrowserAnimationsModule,
MatTabsModule
],
...
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Tab1Component } from './tab1/tab1.component';
import { Tab2Component } from './tab2/tab2.component';
import { Tab3Component } from './tab3/tab3.component';
const routes: Routes = [
{ path: 'tab1', component: Tab1Component, outlet: 'aux' },
{ path: 'tab2', component: Tab2Component, outlet: 'aux' },
{ path: 'tab3', component: Tab3Component, outlet: 'aux' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
现在,当你点击标签导航中的不同标签时,辅助路由将会加载相应的组件,并在
的位置显示内容。
希望这个解决方法对你有帮助!