RouterLinkが機能しない

angular2アプリでのルーティングはうまくいきます。しかし、これに基づいてrouteLinkを作成します：

これが私のルーティングです：

const routes: RouterConfig = [
    { path:'home' , component: FormComponent  },
    { path:'about', component: AboutComponent },
    { path:'**'   , component: FormComponent  }
];

そしてここに私が作ったリンクがあります：

<ul class="nav navbar-nav item">
                    <li>
                        <a routerLink='/home' routerLinkActive="active">Home</a>
                    </li>
                    <li>
                        <a routerLink='/about' routerLinkActive="active">About this</a>
                    </li>
</ul>

私はそれらをクリックすると、尊敬されるコンポーネントに移動しますが、何も実行しないと思いますか？

あなたがそこに示しているコードは完全に正しいです。

このテンプレートを使用するモジュールにRouterModule（RouterLinkが宣言されている場所）をインポートしていないことが問題だと思います。

同様の問題があり、この手順はドキュメントに記載されていないため、解決に時間がかかりました。

したがって、このテンプレートを使用してコンポーネントを宣言するモジュールに移動し、以下を追加します。

import { RouterModule } from '@angular/router';

次に、それをモジュールのインポートに追加します。

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [MyTemplatesComponent]
})
export class MyTemplatesModule { }

正しいインポート文に加えて、<router-outlet></router-outlet>要素にあるrouterLinkを表示する場所も必要です。そのため、データを表示する場所をルーターが認識できるように、HTMLマークアップのどこかに配置する必要があります。

これをテンプレートの下に追加することを忘れないでください：

<router-outlet></router-outlet>

以下のようにリンクを変更してみてください：

  <ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this</a>
    </li>
  </ul>

また、index.htmlのヘッダーに以下を追加します。

<base href="https://stackoverflow.com/">

mroe情報にこのように使用するこのトピックを読む

<a [routerLink]="['/about']">About this</a>

リンクが間違っています。これを行う必要があります：

<ul class="nav navbar-nav item">
    <li>
        <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
    </li>
    <li>
        <a [routerLink]="['/about']" routerLinkActive="active">About this
        </a>
    </li>
</ul>

あなたはこのチュートリアルを読むことができます

routerLinkの代わりにrouterlinkを使用していました。

この質問は今ではかなり古くなっていることを承知しており、おそらくあなたはこれを修正していると思いますが、この問題をトラブルシューティングしているときにこの投稿を見つけた人のために、ここに投稿します。 AnchorタグがIndex.htmlにある場合は機能しません。コンポーネントの1つにある必要があります

モジュールを分割した後にこのエラーが発生した場合場合、ルートを確認すると、次のことが起こりました。

public-routing.module.ts：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', redirectTo: 'home' } // ← This was my mistake
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

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

app-routing.module.ts：

const routes: Routes = [
];

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

{ path: '**', redirectTo: 'home' }AppRoutingModuleに移動します。

public-routing.module.ts：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'home', component: HomeComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent },
    { path: 'credits', component: CreditsComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'news', component: NewsComponent },
    { path: 'presentation', component: PresentationComponent }
]

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

app-routing.module.ts：

const routes: Routes = [
    { path: '**', redirectTo: 'home' }
];

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

この状況に適合する別のケースもあります。インターセプターで、ブール値以外を返すようにした場合、最終結果はそのようになります。

たとえば、私はobj && obj[key]ものを返そうとしました。しばらくデバッグした後Boolean(obj && obj[key])、クリックを通過させるために、これを手動でブール型に変換する必要があることに気付きました。

作業サンプルに続いて、純粋なコンポーネントの場合の解決策を見つけました：

1. アプリレベルでコンポーネントを宣言する
2. コンポーネントで初期化しないでください

私のようなあまり鋭くない目のために、私はのhref代わりにrouterLink、#facepalmを見つけるためにいくつかの検索をしました。