Question

对不起，我还是Angular 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>

我的site-layout.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在点击任何链接之前的样子：

这是点击链接后的样子：

问题是在点击链接后，链接不再有效。对不起，很长的帖子，我已经迫不及待地想解决这个问题，希望有人可以帮我解决这个问题。我已经看到很多资源但尚未遇到任何解决方案。提前谢谢！

Answer 1

添加

`pathMatch: 'full'`

到path: ''路由，如果他们没有子路由

在路径

周围添加'

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

或删除[]

<a routerLink="setting/countrylist">

所以setting/countrylist以字符串而不是表达式传递。

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

Angular 2路由（routingLink行为）

1 个答案: