router-outlet不工作我的组件

Question

我试着学习angular 2，重新设计我的个人网站，但我有一个问题，当我点击导航栏中的适当路线时，我的应用程序无法加载我的组件。

在我的navbar.html中，我有两个链接：

        <li><a [routerLink]="['Home']"><i class="fa fa-home"></i></a></li>
        <li><a [routerLink]="['Langages']">Langages</a></li>

然后我在@RouteConfig的app.component.ts中声明我的路由：

    {path: '/', name: 'Home', component: HomeComponent, useAsDefault: true},
    {path: '/langages', name: 'Langages', component: LangagesComponent},

在我的app.component.ts中，我有一个用来查看导航栏的模板，下面我添加了一个标签来查看我的HomeComponent，如果我切换页面，我会看到我的LangagesComponent，而不是HomeComponent……所以目前，我没有看到HomeComponent和其他组件。

附言:在我的LangagesComponent中，我有：

import {Component} from "angular2/core";

@Component({
    templateUrl: "./dev/langages/langages.html"
})

export class LangagesComponent {}

谢谢你的帮助。

Answer 1

不支持路由中的name (已在一年半前删除)

<li><a [routerLink]="['/']"><i class="fa fa-home"></i></a></li>
<li><a [routerLink]="['/langages']">Langages</a></li>

{path: '', component: HomeComponent, pathMatch: 'full'},
{path: 'langages', component: LangagesComponent},

路由配置中的path不能包含前导/。在routerLink或router.navigateByUrl()中，前导/表示绝对路径，而在没有/的情况下，假设该路径是相对路径。

也不再有@RouteConfig (除非您使用Dart而不是TS)

有关更多详细信息，请参阅https://angular.io/docs/ts/latest/guide/router.html。

Answer 2

name和useAsDefault(not sure)很久以前就被移除了。现在你应该按如下方式设置你的路由，

{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: "home", component: HomeComponent},    
{ path: 'language',  component: LangagesComponent },

.HTML

<li><a routerLink="home"><i class="fa fa-home"></i></a></li>
<li><a routerLink="language">Langages</a></li>

备注：还要确保您将路由器插座放置在某个位置，以便使用HTML中的路由器加载动态视图。