Angular 2：routerLink未解析

Question

• Angular版本：2.1.0
• 路由版本：3.1.0

我正在学习Angular 2中的路由，但是当我点击链接时，自定义片段没有附加到URL上，组件也没有加载。

手动在地址栏中输入片段确实有效，并且组件会在<router-outlet></router-outlet>中加载，但我希望它按预期工作 - 即通过单击routerLink指令内的链接来实现。

我已经遵循了路由文档，但仍然无法得到良好的结果。

这里有一个非常相似的问题，但我发现还没有解决方案适用于我。

我遇到的两个常见解决方案是：

• 拼写错误的“routerLink”，大小写敏感
• 在index.html顶部没有<base href='/'>

此外，在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. 使用静态片段实现 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>

路由文档指出，使用routerLink是用于静态片段，而[routerLink]是用于传递参数的。我尝试了这两种方法，但结果仍然相同。请注意保留HTML标记，不做解释。

- ShadowCore

---

你把你的ts文件编译成js文件了吗？有没有出现任何错误？ - eko

@echonax 谢谢你的提问 - 不，没有错误，并且我已经将它添加到我的问题中。 - ShadowCore

嗯，为什么你的路由器模块不在@NgModule中呢？ - eko

一切看起来都很好。不确定，但尝试 - routerLink="recipes" - micronyks

我认为你应该创建一个 Plunker，我无法复制您的问题。 - Milad

Answer 1

我终于解决了这个问题。

问题的原因是什么？

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

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

修复

我使用了安全导航运算符，它可以防止属性路径中的空值：

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

结论

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

- ShadowCore

---

那么，错误出现在你在问题中没有发布的代码部分？ - ppovoski

是的 - 为此，我已经更新了我的答案并提供了更好的细节。 - ShadowCore