Question

Angular Version：2.1.0
路由器版本：3.1.0

我正在学习Angular 2中的路由，并且单击链接时自定义段不会附加到URL，也不会加载组件。

手动在地址栏中键入段可以正常工作，组件加载到<router-outlet></router-outlet>但不是这样，我想让它按预期工作 - 通过单击routerLink指令中的链接。 / p>

我已经关注路由器documentation并且仍然有不良结果。

这是一个非常相似的question，但是到目前为止还找不到对我有用的解决方案。

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

拼错＆＃39; routerLink＆＃39;这是区分大小写的
<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。使用静态段实现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中的一个不相关的错误，其中有一个属性将字符串分配给名称＆＃39;的未知属性。 - Angular 2在一个＆＃39;配方之前编译了字符串插值。对象已经建立。

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

<强>修正

我使用safe navigaton operator来保护属性路径中的空值：

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

<强>结论

路由中没有错误 - 在我的应用程序的另一部分中出现错误，该错误是在chrome-dev工具中捕获的，然后需要修复以便继续编译应用程序

Angular 2：routerLink无法解析

1 个答案: