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>页面上，并在随机位置散布我的登录表单输入，标签和按钮。

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

login.ts

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

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

Git Link GITHUB LINK

Answer 1

问题是，当您点击Login link时，它仍会显示Home view。对吗？

您只需将AppComponent View更改为此

即可

@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}

];

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

1 个答案: