web-dev-qa-db-ja.com

Angular 6 Material：下線バーでmat-tab-linkを選択する

ウェブサイトにmat-tab-nav-barナビゲーションバーがありますが、mat-tab-link青い下線バーはアクティブなボタンを追跡しません。最初のボタンに留まり、移動しません。背景色が変化するという意味では、ボタンはアクティブ状態になり、対応するページに適切にルーティングされます。

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' },
  ];
}

そしてここに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>

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 { }

私は何が欠けていますか？ありがとうございました！

[〜＃〜] edit [〜＃〜]

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}}
    <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>

結局のところ、メニューの最初のリンクは常にアクティブのままです（rla.isActive）-他のページに移動しているときも同様です。他のすべてのリンクはアクティブ状態を正常にオフにし、ナビゲートされたときにのみアクティブになります。他のリンクに移動するときに、最初のリンクのアクティブ状態をオフにするにはどうすればよいですか？

編集2

app-routing.module.tsコードの追加：

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 { }
angulartypescriptangular-materialnavigationbar
7
Marcus Edensky

リンクの前に/がありません：

<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>

編集：ここでの正しい方法は、すべてのルートに空でないパスを設定することです。その後、ワイルドカードとリダイレクトを使用できます。

const APP_ROUTES: Route[] = [
  { path: 'path-1', component: OneComponent },
  { path: 'path-2', component: TwoComponent },
  { path: 'path-3', component: ThreeComponent },
  { path: '**', redirectTo: 'path-1' },
]
5
Edric

すべてが同じ#rla変数を持っているため、機能しません

次の方法で実行できます。

<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>

または{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>
12
Maciej Sikorski

[routerLinkActiveOptions]="{exact:true}"をaタグに追加する必要があります。あれは。。。になる

<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}}
    <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>
1
Elvis Chweya

異なるローカル変数（#rla1、#rla2）私は*ngFor：

<nav mat-tab-nav-bar>
    <a mat-tab-link
       [routerLink]="['/home/homepage/dashboard/']"
       routerLinkActive #rla1="routerLinkActive"
       [active]="rla1.isActive">Dashboard
    </a>
    <a mat-tab-link
       [routerLink]="['/home/homepage/reports/']"
       routerLinkActive #rla2="routerLinkActive"
       [active]="rla2.isActive">Reports
    </a>
</nav>
1
suhailvs

以下のコードに従うだけです。activeは単にbootstrapクラスです。

<nav mat-tab-nav-bar>
  <a mat-tab-link
  *ngFor="let link of navLinks"
  [routerLink]="['/'+link.path]"
  routerLinkActive="active">
  {{link.label}}
  </a>
</nav>

または、材料設計を使用する代わりに、以下のようにできます。 routerLinkActiveOptionsが使用されていることに注意してください。

<ul class="nav nav-tabs">
    <li role="presentation"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: true}">
      <a routerLink="/">The Problem</a>
    </li>
    <li role="presentation"
        routerLinkActive="active">
      <a routerLink="/the-solution">The Solution</a>
    </li>
    <li role="presentation"
        routerLinkActive="active">
      <a [routerLink]="/the-game">The Game</a>
    </li>
    ....
    ....
 </ul>
0
Prasanna Sasne