角2路由（路由鏈接行爲）

對不起，我還是新來Angular 2，我已經做了我的研究，但仍然困惑路由如何工作。下面是我的路線配置：角2路由（路由鏈接行爲）

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

我app.module看起來是這樣的：

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

我app.component看起來是這樣的：

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

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

我的index.html像這樣：

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

我的網站佈局.component.html看起來是這樣的：

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

我的應用程序樹是這個樣子：

的問題是什麼我的HTML看起來像點擊任何鏈接前：

這是點擊鏈接後的樣子：

問題是點擊鏈接後，鏈接不再工作。對不起，我已經拼命解決這個問題，希望有人能幫助我解決這個問題。我已經看到很多資源，但尚未遇到任何解決方案。先謝謝你！

來源

2016-10-05 arvstracthoughts

添加

`pathMatch: 'full'`

到path: ''路線，如果他們沒有孩子的路線

添加'路徑周圍

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

或刪除[]

<a routerLink="setting/countrylist">

因此setting/countrylist作爲字符串而不是表達式傳遞。

如果<a [routerLink]="...">位於路由組件內，請使用/開始路徑以確保絕對路由而不是相對路由。

來源

2016-10-05 04:48:57

嗨甘特我的路由器鏈接看起來像這樣：'{{subMenuInfo.name}}'，它來自一個類的數組。 – arvstracthoughts

沒有在你的問題的代碼（我有一個錯字'Ä'而不是'''）。 –

感謝Gunter的迴應，但是你知道爲什麼路由行爲與我在上面的映像上發佈的行爲類似嗎？ – arvstracthoughts

角2路由（路由鏈接行爲）

回答

相關問題