Angular 6 材质:mat-tab-link 通过下划线栏选择 [英] Angular 6 Material: mat-tab-link be selected by underlining bar
问题描述
我的网站有一个 mat-tab-nav-bar 导航栏，但 mat-tab-link 蓝色下划线栏不会追逐活动按钮.它只是停留在第一个按钮上，不会移动.尽管背景颜色发生变化，但按钮确实会变为活动状态，并且它们可以很好地路由到相应的页面.
这是app.component.ts:
import { Component } from '@angular/core';@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {导航链接 = [{路径:''，标签:'问题'}，{路径:'解决方案'，标签:'解决方案'}，{ path: 'the-game', label: 'The Game' },{路径:'概率计算器'，标签:'概率计算器'}，];}这是app.component.html:
这是app.module.ts:
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从'@angular/material/tabs' 导入 { MatTabsModule };从@angular/platform-browser/animations"导入 { BrowserAnimationsModule };import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };import { TheProblemComponent } from './the-problem/the-problem.component';import { TheSolutionComponent } from './the-solution/the-solution.component';import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';import { TheGameComponent } from './the-game/the-game.component';@NgModule({声明: [应用组件，问题组件，解决方案组件，概率计算器组件，游戏组件],进口:[应用路由模块，浏览器模块，浏览器动画模块，MatTabs 模块],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }我错过了什么?谢谢！
编辑
我像这样编辑了 app.component.html 以了解有关链接活动"状态的更多信息:
</a></nav><路由器插座></路由器插座>
事实证明，菜单中的第一个链接始终保持活动状态 (rla.isActive) - 在我导航到其他页面时也是如此.所有其他链接关闭它们的活动状态就好了，并且只有在导航到它们时才会被激活.导航到其他链接时如何关闭第一个链接的活动状态?
编辑 2
添加app-routing.module.ts代码:
import { NgModule } from '@angular/core';从@angular/router"导入 { RouterModule, Routes };import { TheProblemComponent } from './the-problem/the-problem.component';import { TheSolutionComponent } from './the-solution/the-solution.component';import { TheGameComponent } from './the-game/the-game.component';import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';const 路由:路由 = [{路径:''，组件:问题组件}，{ path: 'the-solution', 组件: TheSolutionComponent },{ path: 'the-game', 组件: TheGameComponent },{ 路径:'概率计算器'，组件:ProbabilityCalculatorComponent }];@NgModule({进口:[ RouterModule.forRoot(routes) ]，出口:[ RouterModule ]})导出类 AppRoutingModule { }它不适合你，因为每个都有相同的 #rla 变量
你可以这样做:
或使用 {exact:true}
I have a mat-tab-nav-bar navigation bar for my website, but the mat-tab-link blue underlining bar won't chase the active button. It just stays at the first button, and doesn't move. The buttons do turn into active state though in the sense that the background color changes, and they route well to their corresponding pages.
Here's the app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
navLinks = [
{ path: '', label: 'The Problem' },
{ path: 'the-solution', label: 'The Solution' },
{ path: 'the-game', label: 'The Game' },
{ path: 'probability-calculator', label: 'Probability calculator' },
];
}
And here's the app.component.html:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
Here is the app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TheProblemComponent } from './the-problem/the-problem.component';
import { TheSolutionComponent } from './the-solution/the-solution.component';
import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';
import { TheGameComponent } from './the-game/the-game.component';
@NgModule({
declarations: [
AppComponent,
TheProblemComponent,
TheSolutionComponent,
ProbabilityCalculatorComponent,
TheGameComponent
],
imports: [
AppRoutingModule,
BrowserModule,
BrowserAnimationsModule,
MatTabsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
What am I missing? Thank you!
EDIT
I edited the app.component.html like this to find out some more about the link "active" state:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
<div style="color: red; margin-left: 10px;">
<span *ngIf="rla.isActive"> Is active!</span>
<span *ngIf="!rla.isActive"> Is not active...</span>
</div>
</a>
</nav>
<router-outlet></router-outlet>
As it turns out, the first link in the menu always remains active (rla.isActive) - also when I'm navigating to other pages. All other links turn off their active state just fine, and only get activated when they are navigated to. How do I turn off the active state of the first link when navigating to other links?
EDIT 2
Adding app-routing.module.ts code:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TheProblemComponent } from './the-problem/the-problem.component';
import { TheSolutionComponent } from './the-solution/the-solution.component';
import { TheGameComponent } from './the-game/the-game.component';
import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';
const routes: Routes = [
{ path: '', component: TheProblemComponent },
{ path: 'the-solution', component: TheSolutionComponent },
{ path: 'the-game', component: TheGameComponent },
{ path: 'probability-calculator', component: ProbabilityCalculatorComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
It doesn't work for you because every has the same #rla variable
You can do it this way:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="link.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
or with {exact:true}
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[routerLinkActiveOptions]="{exact:true}"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
这篇关于Angular 6 材质:mat-tab-link 通过下划线栏选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
