角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看起来像点击任何链接前：

这是点击链接后的样子：

问题是点击链接后，链接不再工作。对不起，我已经拼命解决这个问题，希望有人能帮助我解决这个问题。我已经看到很多资源，但尚未遇到任何解决方案。先谢谢你！

答

添加

`pathMatch: 'full'`

到path: ''路线，如果他们没有孩子的路线

添加'路径周围

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

或删除[]

<a routerLink="setting/countrylist">

因此setting/countrylist作为字符串而不是表达式传递。

如果<a [routerLink]="...">位于路由组件内，请使用/开始路径以确保绝对路由而不是相对路由。

嗨甘特我的路由器链接看起来像这样：'{{subMenuInfo.name}}'，它来自一个类的数组。 – arvstracthoughts

没有在你的问题的代码（我有一个错字'Ä'而不是'''）。 –

感谢Gunter的回应，但是你知道为什么路由行为与我在上面的映像上发布的行为类似吗？ – arvstracthoughts

角2路由（路由链接行为）

相关推荐