Angular 2 : routerLink not resolving

Question

• Angular 版本:2.1.0
• 路由器版本:3.1.0

我正在学习 Angular 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.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.component.html)

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

<强>4。使用静态段 (header.component.html) 实现 routerLink

<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]是为了使用params传递。我已经尝试了这两种方法，但它们仍然会产生相同的结果。

Answer 1

我终于解决了这个问题。

是什么原因？

我的一个 component.html 中有一个不相关的错误，其中有一个属性正在将字符串分配给“名称”的未知属性 - Angular 2 在“配方”之前编译了字符串插值对象已设置。

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

修复

我使用了 safe navigaton operator防止属性路径中出现空值:

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

结论

路由中没有错误 - 这是我应用程序的另一部分中的错误，在 chrome 中被捕获 - 然后需要修复开发工具才能继续编译应用程序