Question

我无法获得在Angular 2应用程序中工作的链接。

我的页面由两部分组成：标题和下面的内容。这两个部分由每个部分的路由器插座建模。当我点击链接时，通常我想要更改标题和内容。所以我尝试使用routerLink并定义每个商店的链接位置，例如<a [routerLink]="[{ outlets: { primary: '/content', header: '/header' }}]">link</a>。

不幸的是，该链接不起作用。在控制台上，路由器抛出以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '/content'
Error: Cannot match any routes. URL Segment: '/content'
    at ApplyRedirects.noMatchError (router.js:1760)
    at CatchSubscriber.eval [as selector] (router.js:1725)
    at CatchSubscriber.error (catchError.js:105)
// ... Many more lines

另外，我想知道链接是否被正确解析。检查HTML时，链接如下所示：<a ng-reflect-router-link="[object Object]" href="//content(header:/header)">link</a>

我想知道我做错了什么，感谢你的帮助！

以下是设置：

app.module.ts

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { ContentComponent } from './content/content.component';
import { LinkComponent } from './link/link.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        ContentComponent,
        LinkComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
    selector: 'app-root',
    template: `
<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
}

APP-routing.module.ts

import { NgModule } from '@angular/core';
import { Route, RouterModule } from '@angular/router';

import { LinkComponent } from './link/link.component';
import { ContentComponent } from './content/content.component';
import { HeaderComponent } from './header/header.component';

const routes : Route[] = [
    {
        path: '',
        component: LinkComponent
    },
    {   path: 'content',
        component: ContentComponent
    },
    {
        path: 'header',
        component: HeaderComponent,
        outlet: 'header'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
}) export class AppRoutingModule { }

链路/ link.component.ts

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

@Component({
    selector: 'app-link',
    template: `
<p>I am the <a [routerLink]="[{ outlets: { primary: '/content', header: '/header'}}]">link</a>.</p>`
})
export class LinkComponent { }

头/ header.component.ts

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

@Component({
        selector: 'app-header',
        template: '<p>I am the header.</p>'
})
export class HeaderComponent { }

内容/ content.component.ts

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

@Component({
        selector: 'app-content',
        template: '<p>I am the content.</p>'
})
export class ContentComponent { }

我使用Angular的5.2.8版本。

$ ng --version

Angular CLI: 1.6.7
Node: 9.4.0
OS: linux x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

使用多个路由器插座和routerLink时，路由无法匹配