Angular 2 Routing (routingLink-Verhalten)

Es tut mir leid, ich bin noch neu in Angular 2, ich habe meine Nachforschungen gemacht, aber immer noch verwirrt, wie Routing funktioniert. Unten ist mein Weg config:Angular 2 Routing (routingLink-Verhalten)

export const appRoutes: Route[] = [ 
    { 
     path: '', 
     component: SiteLayoutComponent, 
     children: [ 
      { 
       path: '', 
       pathMatch: 'full', 
       component: HomeComponent 
      }, 
      { 
       path: 'system', 
       children: [ 
        { 
         path: '', 
         pathMatch: 'full', 
         component: MenuItemListComponent, 
        }, 
        { 
         path: 'menuitemlist', 
         component: MenuItemListComponent, 
        }, 
       ], 
      }, 
      { 
       path: 'setting', 
       children: [ 
        { 
         path: '', 
         pathMatch: 'full', 
         component: CountryListComponent, 
        }, 
        { 
         path: 'countrylist', 
         component: CountryListComponent, 
        }, 
       ], 
      } 
     ], 
    }, 
];

Meine app.module wie folgt aussieht:

// Angular2 libraries 
import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule } from '@angular/router'; 
import { APP_BASE_HREF, LocationStrategy, PathLocationStrategy } from '@angular/common'; 

// Main 
import { AppComponent } from './app.component'; 
import { appRoutes, appComponents } from './app.routing'; 


@NgModule({ 
    // directives, components, pipes 
    declarations: [ 
     AppComponent, 
     appComponents 
    ], 
    // modules 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(appRoutes), 
    ], 
    providers: [ 
     { provide: LocationStrategy, useClass: PathLocationStrategy }, 
     { provide: APP_BASE_HREF, useValue: '/' }, 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
}

Meine app.component wie folgt aussieht:

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'content', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { 
}

Meine index.html sieht wie folgt aus :

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>TEST</title> 


    <!-- npm packages --> 
    <script src="/node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="/node_modules/zone.js/dist/zone.js"></script> 
    <script src="/node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="/node_modules/systemjs/dist/system.js"></script> 
    <script src="/node_modules/rxjs/bundles/Rx.js"></script> 


    <!-- Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 

    <script> 
     System.import('./app/boot').catch(
      function (err) { 
       console.error(err); 
      } 
     ); 
    </script> 
</head> 
<body> 
    <content>Loading...</content> 
</body> 
</html>

Mein Website-Layout .component.html sieht wie folgt aus:

<a routerLink="setting/countrylist"><span class="txt">Country</span></a> 
<a routerLink="system/menuitemlist"><span class="txt">Menu Item</span></a> 

<br /> 
<router-outlet></router-outlet>

Meine Anwendung Baum sieht wie folgt aus:

Die Frage ist, was meine HTML aussieht, bevor Sie irgendwelche Links klicken:

So sieht es aus, nachdem Sie auf einen Link geklickt haben:

Die Probleme sind nach Klicken auf einen Link, die Links nicht mehr funktionieren. Sorry für den langen Post, ich bin schon verzweifelt, um dieses Problem zu lösen, hoffe, dass jemand mir diesbezüglich helfen kann. Ich habe schon viele Ressourcen gesehen, aber noch keine Lösung dafür gefunden. Vielen Dank im Voraus!

Quelle

2016-10-05 arvstracthoughts

hinzufügen

`pathMatch: 'full'`

zu path: '' Routen, wenn sie Kind Routen nicht

' um den Pfad hinzufügen haben

<a [routerLink]="'setting/countrylist'">

oder entfernen []

<a routerLink="setting/countrylist">

so setting/countrylist wird als Zeichenfolge anstelle von Ausdruck übergeben.

Wenn die <a [routerLink]="..."> innerhalb einer gerouteten Komponente sind, starten Sie den Pfad mit /, um absolutes Routing anstelle von relativem Routing sicherzustellen.

Quelle

2016-10-05 04:48:57

Hallo Gunter mein Router-Link sieht so aus: '{{subMenuInfo.name}}', es ist von einem Klassen-Array. – arvstracthoughts

Nicht im Code in Ihrer Frage (ich hatte einen Tippfehler 'Ä' anstelle von' ''). –

Vielen Dank für die Antwort Gunter, aber wissen Sie, warum Routing wie das, was ich auf dem Bild oben veröffentlicht? – arvstracthoughts

Angular 2 Routing (routingLink-Verhalten)

Antwort

Verwandte Themen