Question

我尝试学习角度2，重新设计我的个人网站，但是我遇到了问题，当我进入适当的路线时，我的应用程序没有加载我的组件。

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

        <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和其他组件。

P.S：在我的LangagesComponent中，我有：

import {Component} from "angular2/core";

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

export class LangagesComponent {}

感谢您的帮助。

Answer 1

路由中的

name不受支持（已在1/2年前删除）

<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中的路由器加载动态视图。

router-outlet无法运行我的组件

2 个答案: