在Angular中,可以使用动态路由来创建标签页。下面是一个示例解决方案:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabComponent } from './tab.component';
const routes: Routes = [
{ path: 'tabs/:id', component: TabComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-tab',
template: `
标签页1的内容
标签页2的内容
标签页3的内容
`,
})
export class TabComponent implements OnInit {
tabId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.tabId = this.route.snapshot.paramMap.get('id');
}
}
在上述代码中,我们使用ActivatedRoute
服务来获取路由参数,然后根据参数的值来显示不同的标签页内容。
标签页1
标签页2
标签页3
以上代码中的routerLink
指令用于创建路由链接,点击链接时会导航到相应的标签页。
这样,当用户点击不同的链接时,路由会自动导航到相应的标签页,并显示对应的内容。
下一篇:Angular动态CSS#