<mat-tab> 角材质内的 routerLink
Posted
技术标签:
【中文标题】<mat-tab> 角材质内的 routerLink【英文标题】:routerLink inside <mat-tab> angular material 【发布时间】:2018-06-06 13:32:47 【问题描述】:<a routerLink="/add"></a><mat-tab label="Add Identity"></mat-tab>
或
<mat-tab label="Add Identity"> <a routerLink="/add"></a></mat-tab>.
我是 Angular 新手,正在尝试将路由与上述 Angular 材质组件一起使用。
但是当我单击主页选项卡时,它没有附加 URL。 对此有任何帮助。
【问题讨论】:
唯一的问题是,如果一次有很多标签,滑块(箭头)会丢失,默认情况下是 mat-tab-group 【参考方案1】:您实际上可以像这样将它们组合成一个:
<a mat-tab-link [routerLink]="/add">Add Identity</a>
您还需要确保您使用的是<nav mat-tab-nav-bar>
,而不是<mat-tab-group>
。
此处的文档:https://material.angular.io/components/tabs/overview#tabs-and-navigation
【讨论】:
您的回答使我找到了我需要的解决方案,但是您应该提到,使用此解决方案,不应使用这就是我的实现方式。
app.component.html
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
link.label
</a>
</nav>
<router-outlet></router-outlet>
应用组件
export class AppComponent implements OnInit
title = 'app';
navLinks: any[];
activeLinkIndex = -1;
constructor(private router: Router)
this.navLinks = [
label: 'TabTest1',
link: './tabtest1',
index: 0
,
label: 'Tab Test2',
link: './tabtest2',
index: 1
,
label: 'Tab Test3',
link: './tabtest3',
index: 2
,
];
ngOnInit(): void
this.router.events.subscribe((res) =>
this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
);
routing.module.ts
const routes: Routes = [
path: '', redirectTo: '/tabtest1', pathMatch: 'full' ,
path: 'tabtest1', component: TestComponent1,
path: 'tabtest2', component: TestComponent2,
];
export const appRouting = RouterModule.forRoot(routes);
@NgModule(
imports: [
RouterModule.forRoot(routes),
CommonModule
],
exports:[
RouterModule
],
declarations: []
)
export class AppRoutingModule
我希望这对某人有帮助
【讨论】:
如果我在 onTabClick() 函数中添加 (click)="onTabClick()" 到 "a" 元素和 console.log(this.activeLinkIndex) 我没有得到正确的索引值。知道如何正确跟踪活动链接索引吗?【参考方案3】:如果您需要在<mat-tab-group>
内单击<mat-tab>
上设置routerLink
,而无需使用mat-tab-nav
直接使用任何变通方法和更改当前代码逻辑事物-您可以使用mat-tab-group listener (selectedTabChange)="onTabChanged($event)"
:
.html:
<mat-tab-group
(selectedTabChange)="onTabChanged($event)"
>
<mat-tab label="Link to some thing"></mat-tab> <!-- empty stub tab only for link -->
<mat-tab label="Some content tab"> ... content there ... </mat-tab>
</mat-tab-group>
.ts:
onTabChanged(event: MatTabChangeEvent): void
switch (event.index)
case 0: // index of the tab
// this is our stub tab for link
this.router.navigate(['/admin/my-link']);
break;
case 1:
// do stuff with content or do nothing :)
break;
【讨论】:
【参考方案4】:<nav mat-tab-nav-bar [backgroundColor]="background">
<a mat-tab-link *ngFor="let link of links"
(click)="activeLink = link"
[active]="activeLink == link"> link </a>
<a mat-tab-link disabled>Disabled Link</a>
</nav>
参考:https://material.angular.io/components/tabs/overview#tabs-and-navigation
【讨论】:
以上是关于<mat-tab> 角材质内的 routerLink的主要内容,如果未能解决你的问题,请参考以下文章