1

Angular 2 アプリケーションで機能するリンクを取得できません。

マイページは、ヘッダーとその下のコンテンツの 2 つの部分で構成されています。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/header.component.ts

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

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

content/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
4

0 に答える 0