routerLink внутри ‹mat-tab› угловой материал

<a routerLink="/add"></a><mat-tab label="Add Identity"></mat-tab>

or

<mat-tab label="Add Identity"> <a routerLink="/add"></a></mat-tab>.

Я новичок в Angular, пытаюсь использовать маршрутизацию с вышеуказанным компонентом материала Angular.

Но он не добавляет URL-адрес, когда я нажимаю на вкладку «Главная». Любая помощь в этом.


angular angular4-router
person Deepak    schedule 25.12.2017    source источник
comment
Единственная проблема заключается в том, что ползунок (стрелка) отсутствует, если одновременно много вкладок, что по умолчанию является группой mat-tab-group.   -  person Tejas Vesvikar    schedule 23.04.2019

Ответы (4)


arrow_upward
27
arrow_downward

вы можете объединить их в один, как это:

<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

person Hannah C    schedule 03.02.2018
comment
Ваш ответ привел меня к нужному мне решению, однако вы должны упомянуть, что с этим решением следует использовать не ‹mat-tab-group›, а ‹nav mat-tab-nav-bar› - person toongeorges; 08.03.2018
comment
спасибо @toongeorges! ответ был обновлен, чтобы уточнить - person Hannah C; 09.03.2018

arrow_upward
17
arrow_downward

Вот как я реализовал.

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

Я надеюсь, что это помогает кому-то

person Niraj Sonawane    schedule 26.10.2018
comment
если я добавлю (click)=onTabClick() к элементу a и console.log(this.activeLinkIndex) в функции onTabClick(), я не получу правильные значения индекса. Есть идеи, как правильно отслеживать индекс активной ссылки? - person Meeting Attender; 02.01.2020

arrow_upward
0
arrow_downward

если вам нужно установить routerLink на Click <mat-tab> внутри <mat-tab-group> без каких-либо обходных путей и изменений текущего кода с mat-tab-nav логическими вещами напрямую - вы можете использовать слушатель группы mat-tab-group (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;
    }
person Kurkov Igor    schedule 16.11.2020

arrow_upward
0
arrow_downward 

<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

person Ravi    schedule 31.05.2021