Angular2 Materialdesign mdtabs mit Router

I Zungen nicht für das Routing Arbeit leisten kann (from angular material 2 docs):Angular2 Materialdesign mdtabs mit Router

Komponente:

export class AppComponent { 
    navLinks: [ 
    '/groups', 
    '/objects' 
    ] 
}

html:

<nav md-tab-nav-bar> 
    <a md-tab-link 
    *ngFor="let link of navLinks" 
    [routerLink]="link" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="rla.isActive"> 
    {{tabLink.label}} 
    </a> 
</nav> 

<router-outlet></router-outlet>

keine Fehler im Protokoll kann sein, es ist offensichtlich, aber immer noch ...

Quelle

2017-03-04 Anton Arsentyev

Was ist das, was Sie erwarten? Ich habe auch diesen Ansatz versucht, aber es ist fehlgeschlagen, also habe ich es auf eine andere Weise korrigiert. So kann ich Ihnen helfen, in diesem – Aravind

@Aravind Erwartungen sind Registerkarten für die Navigation durch App haben, habe ich zwei Komponenten auf ['/ Gruppen', '/ Objekte' zugeordnet, haben Link und Label für sie, und nicht wissen, wie um es zu führen;). Problemumgehung besteht darin, meinen eigenen Stil für A-Tag ofc) –

zwei Komponenten in zwei Registerkarten zu verwenden und zwischen ihnen durch Ihre Routing-URL zu navigieren? richtig? – Aravind

Es funktioniert völlig in Ordnung mit dem Code unten

<nav md-tab-nav-bar aria-label="weather navigation links"> 
    <a md-tab-link 
     *ngFor="let routeLink of routeLinks; let i = index" 
     [routerLink]="routeLink.link" 
     [active]="activeLinkIndex === i" 
     (click)="activeLinkIndex = i"> 
     {{routeLink.label}} 
    </a> 
</nav> 
<router-outlet></router-outlet>

Mein Komponentencode wie folgt aussieht,

export class App { 
    routeLinks:any[]; 
    activeLinkIndex = 0; 
    constructor(private router: Router) { 
    this.routeLinks = [ 
    {label: 'Welcome', link: 'welcome'}, 
    {label: 'Home', link: 'home'}]; 

    } 
}

LIVE DEMO

Quelle

2017-03-05 11:34:08 Aravind

I denke oben Code Schnipsel arbeiten nicht mit Material Design. Weil ich das überprüft habe. Aber unten Code funktioniert perfekt mit Material Design

import { Router } from "@angular/router"; 

constructur(router:Router){} 

public selectedTab(e) { 
     switch (e.index) { 
     case 0: 
      this.router.navigateByUrl('/'); 
      break; 
     case 1: 
      this.router.navigateByUrl('/contact'); 
      break; 
     case 2: 
      this.router.navigateByUrl('/about'); 
      break; 

     default: 
      console.log('material-design-mdtabs-with-router'); 
      break; 
     } 
    }

<md-tab-group (focusChange)="selectedTab($event)"> 
      <md-tab> 
       <template md-tab-label> 
        Home 
       </template> 
      </md-tab> 
      <md-tab> 
        <template md-tab-label> 
         Contact 
        </template> 
       </md-tab> 
       <md-tab> 
        <template md-tab-label> 
         About 
        </template> 
       </md-tab> 
      </md-tab-group> 

<router-outlet></router-outlet>

Quelle

2017-07-11 06:03:09

Dies funktioniert, wenn Registerkarten manuell geklickt werden, aber fehlschlagen, wenn der Benutzer versucht, die Zurück-Schaltfläche des Browsers zu drücken. Beim Zurückklicken wird nicht auf die zuvor ausgewählte Registerkarte hervorgehoben. – Aniket

Die Demo-Beispiel in Ihrem Code sollte ein wenig verändert werden und wird auch funktionieren:

<nav md-tab-nav-bar> 
    <a md-tab-link 
    *ngFor="let tabLink of tabLinks; let i = index" 
    [routerLink]="tabLink.link" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="rla.isActive"> 
    {{tabLink.label}} 
    </a> 
</nav>

und in der Steuerung definieren tabLinks :

export class AppComponent { 
    tabLinks = [ 
    {label: 'Groups', link: '/groups'}, 
    {label: 'Objects', link: '/objects'} 
    ]; 
...

Quelle

2017-09-01 21:47:19 Svetlana

Angular2 Materialdesign mdtabs mit Router

Antwort

Verwandte Themen