角度2：routerLinkは

Question

を解決していない

• 角度のバージョン：2.1.0
• ルータのバージョン：3.1.0

私は角2でルーティングを学んでいますし、カスタムセグメントは、URLに付加されていませんリンクをクリックしてもコンポーネントが読み込まれません。

セグメントをアドレスバーに手動で入力すると、コンポーネントが<router-outlet></router-outlet>にロードされますが、代わりにrouterLinkディレクティブ内のリンクをクリックすることで、期待どおりに動作します。

私はルータdocumentationに従っており、依然として悪い結果を出しています。

ここには非常によく似たquestionがありますが、まだ解決策が見つかっていません。

私が遭遇した2つの一般的な解決策は以下のとおりです。大文字と小文字が区別

がindex.html

の上部に<base href='/'>はまたエラーがない持っていません

• スペルミス「routerLink」 Chromeのコンソールウィンドウで

  これから私は明らかな解決策を取り消したいと思っています。

  1.コンフィグカスタムルート（routes.ts）

  import { Routes, RouterModule } from '@angular/router'; 
  import { RecipesComponent } from './recipes/recipes.component'; 
  import { ShoppingListComponent } from './shopping-list/shopping-list.component'; 
  
  //TODO Fix routing bug (not switching on click or displaying in URL) 
  export const APP_ROUTES: Routes = [ 
      {path: '', redirectTo: 'recipes', pathMatch: 'full'}, 
      {path: 'recipes', component: RecipesComponent}, 
      {path: 'shopping-list', component: ShoppingListComponent} 
  ]; 
  
  /*Set routing up for root of app*/ 
  export const routing = RouterModule.forRoot(APP_ROUTES); 
  

  2.インポートルートグローバル（app.module：

  は、これは私が私のカスタムのルータを設定するためにやっていることです。 TS）

  import { routing } from './routes';//Custom routes file 
  
      @NgModule({      
       // Declarations removed for bravity 
       imports: [ 
       BrowserModule, 
       FormsModule, 
       HttpModule, 
       routing 
       ], 
       providers: [ShoppingListService], 
       bootstrap: [AppComponent,] 
      }) 
      export class AppModule { } 
  

  3.サプライRouterOutlet指令（app.c omponent.html）

  <rb-header></rb-header> 
  <div class="container"> 
      <router-outlet></router-outlet> 
  </div> 
  

  4.静的セグメント（header.component.html）

  <ul class="nav navbar-nav"> 
      <li><a routerLink="/recipes">Recipes</a></li> 
      <li><a routerLink="/shopping-list">Shopping List</a></li> 
  </ul> 
  

  documentationはrouterLinkを使用して静的セグメント用であり、[routerLink]にするためのものであることを述べているルータとrouterLinkを実装しますparamsを使って渡す。私は両方のアプローチを試みましたが、それでも同じ結果をもたらします。

Answer 1

私は最終的に問題を解決しました。

原因は何ですか？

「名前」の未知のプロパティに文字列を代入されたプロパティがあった私のcomponent.htmlの1内部無関係なバグ - 「レシピ」オブジェクトを設定した文字列の前に補間をコンパイルした角度2。

<h4 class="list-group-item-heading">{{recipe.name}}</h4> 

修正

は、私は、プロパティのパスにヌルデバイスを保護safe navigaton operatorを使用：

<h4 class="list-group-item-heading">{{recipe?.name}}</h4> 

結論

ルーティングにはバグがありませんでした - それはでした私のアプリケーションの別の部分にエラーがあったのはカウアプリケーションをコンパイルするために修正が必要なchrome-devツールのght