web-dev-qa-db-fra.com

routerLink inside <mat-tab> matériau angulaire

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

Je suis nouveau sur Angular, J'essaye d'utiliser le routage avec le composant matériel angulaire ci-dessus . Mais ce n'est pas l'ajout de l'URL lorsque je clique sur l'onglet Accueil . Toute aide à ce sujet.

angularangular4-router
5
Deepak

vous pouvez réellement les combiner en un seul comme ceci:

<a mat-tab-link [routerLink]="/add">Add Identity</a>

vous devez également vous assurer que vous utilisez <nav mat-tab-nav-bar> au lieu de <mat-tab-group>.

documentation ici: https://material.angular.io/components/tabs/overview#tabs-and-navigation

11
Hannah C

Voici comment j'ai implémenté.

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>

AppComponent 

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

J'espère que ça aidera quelqu'un 

2
Niraj Sonawane

Utilisez comme ça,

<mat-tab  label="Add Identity"> <a [routerLink]="['/add']"></a></mat-tab>.
0
Sajeetharan