web-dev-qa-db-ja.com

Angular2ルーターリンクが機能しない

ルーターリンクはルートコンポーネントから機能し、リンクを子コンポーネントに移動すると同じリンクは機能しません。プランカコードは、作業リンクと非作業リンクを示しています。前もって感謝します。以下は機能しないリンクです。

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

問題のあるプランカーコード

angularangular2-routingangular2-template
10
balaG

AppLayoutModuleにRouterModuleをインポートして、次のように表示する必要があります。

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppLayout} from './layout.component';
import {RouterModule} from '@angular/router';

@NgModule({
    imports: [ BrowserModule, RouterModule ],
    declarations: [ AppLayout ],
    exports: [ AppLayout ]
})

export class AppLayoutModule {}

それなしでは、コンポーネントはrouterLinkが何であるかを知らず、href属性を修正するためにコンパイルしませんでした。

更新されたPlunker ここ

24
Marcin

Routerlinkが機能するには、使用しているコンポーネントにRouterをインポートする必要があります

例

Import {Component} from '@ angular / core';
Import {Router} from '@ angular / router';

@Component ({
Selector: 'my-menu',
template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</ Div>
,}) 
Export class AppLayout{}

ありがとうございました！

1
Daniel Garcia

これがモジュールにインポートされたスタンドアロンコンポーネントである場合は、RouterModuleをモジュールのインポートに追加することもできます。私は自分のファイルにモジュール宣言があるのが好きなので、ここでの解決策はapp-moduleを持つことです。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppLayoutModule} from '...'; <--could also be a component

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppLayoutModule,
        BrowserModule,
        RouterModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

必ず確認する必要があるのは、RouterModuleが、モジュールファイルまたはコンポーネントファイルのいずれかで、routerLinkディレクティブを使用するモジュールにインポートされることです。

0
Jan Morten Sørensen