web-dev-qa-db-ja.com

RouterLinkが機能しない

Angular2アプリでの私のルーティングはうまくいきます。しかし、私は this に基づいていくつかの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>

私はそれらをクリックするとそれが尊重されたコンポーネントにナビゲートすると思いますが、彼らは何もしませんか？

angularangular2-routing
79
Jeff

あなたがそこに見せているコードは絶対に正しいです。

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

私は同様の問題を抱えていました、そして、このステップがドキュメンテーションで言及されていないので、それは解決するのにいくらか時間がかかりました。

それで、このテンプレートでコンポーネントを宣言するモジュールに行き、そして追加してください：

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

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

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

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

232
Sam Redway

これを忘れないでください。これをテンプレートの下に追加します。

<router-outlet></router-outlet>
16
zai

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

  <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="/">

6
raj_just123

詳しく読むにはこれをこのように使用してください トピック

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

リンクが間違っている、あなたはこれをしなければならない：

<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>

これを読むことができます チュートリアル

0
Fernando Del Olmo