Angular 2 RC.6中的RouterLink不重定向

Question

我的问题是我希望导航栏出现在每个页面上。 在我的app.component.ts中，我具有以下内容：

@Component({
    selector: 'my-app',
    template: `
         <nav-bar></nav-bar>
         <home></home>
         <router-outlet></router-outlet>
`
})
export class AppComponent {

}

首先是我的routes.config.ts文件：

   const appRoutes: Routes = [

    {path:'home', component: HomeComponent, useAsDefault: true},
    {path:'login', component: LoginComponent}

];

export const appRoutingProviders: any = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

现在，它将呈现我想要的方式。 但是，一旦我单击“登录”，我希望它将我重定向到另一个页面，但它使我留在<home></home>页面上，并将我的登录表单输入，标签和按钮分散在任意位置。

我想单击“登录”并转到一个全新的页面。

登录名

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl:'./login.html'
})

如果您查看我的GIT链接，则我的HTML文件位于frontend->build那么应该很容易从那里弄清楚它。

Git链接GITHUB LINK

Answer 1

问题是，当您单击“ Login link ，它仍显示Home view 。

您只需要将AppComponent视图更改为此，

@Component({
    selector: 'my-app',
    template: `
         <nav-bar></nav-bar>
         <home></home>                          //<<<===removed home selector from this line.
         <router-outlet></router-outlet>
`
})
export class AppComponent {

}

您还需要将路线更改为以下所示，

const appRoutes: Routes = [

    {path:'', redirecTo:'home',  pathMatch: 'full'}  //<<<===added this
    {path:'home', component: HomeComponent },
    {path:'login', component: LoginComponent}

];