Угловые 2: routerLink не разрешение

Question

• Угловая Версия: 2.1.0
• Router Версия: 3.1.0

Я учусь маршрутизация в угловых 2 и пользовательских сегментах не добавляются к URL при нажатии ссылки и загрузке компонента.

Вручную вводить сегменты в адресную строку, работает, а компонент загружается в <router-outlet></router-outlet>, но вместо этого я хочу, чтобы он работал должным образом - щелкнув ссылку внутри директивы routerLink.

Я следил за маршрутизатором documentation и до сих пор имею плохие результаты.

Вот очень похоже question, но пришли, чтобы найти решения, которые работают на меня пока.

Два общего решения я наткнулась являются:

• орфографические ошибки «routerLink», который является чувствительным к регистру
• Не имея <base href='/'> в верхней части index.html

Также нет никаких ошибок в консольном окне в 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. ц)

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. Реализация routerLink со статическими сегментов (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] используя параметры для прохождения. Я пробовал оба подхода, но они все же представляют один и тот же результат.

Answer 1

Я, наконец, решил проблему.

В чем была причина?

неродственного ошибка в одном из моих component.html где была собственность, которая была назначая строку в неизвестное свойство «имя» - Угловая 2 составившего интерполяцию строки перед объектом «рецепт» был создан.

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

Fix

Я использовал safe navigaton operator, который оберегает от нулей путей собственности:

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

Заключения

Там не было ошибки в маршрутизации - это было ошибка в другой части моей заявки, которая была cau ght в инструментах chrome-dev, которые затем необходимо было исправлять, чтобы продолжить компиляцию приложения