Question

我想在angular2项目中从登录页面导航到主页。以下是使用的示例代码。

login.component.ts

@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent}
])

@Component({
    selector: 'login',
    providers: [LoginService],
    templateUrl: 'app/login/login.component.html'
})

export class LoginComponent {
login() {
    //.....
    this._router.navigate(['Home']);
}

home.component.ts

@Component({
    selector: 'home',
    templateUrl: 'app/home/home.component.html'
})

app.component.ts

@Component({
    selector: 'my-app',
    template: `
        <login></login>
        <router-outlet></router-outlet>
    `,
    directives: [LoginComponent,ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/login', name: 'Login', component: LoginComponent }
])
export class AppComponent {}

但它不起作用。如何进行路由？

Answer 1

您应该定义到您家的路线。如果路线与任何路线不匹配，我建议您还添加导航信息。在这种情况下，app.component.ts中的RouteConfig装饰器应如下所示：

@RouteConfig([
   { path: '/login', name: 'Login', component: LoginComponent },
   { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true   },
   { path: '/*other', name: 'Other', redirectTo: ['/Home'] }
])

现在，您可以从登录轻松导航到您的主页组件：

this.router.navigate(['/Home']);

如何在angular2中进行路由？

1 个答案: