Angular2根据从回调接收到的数据进行路由

Question

我对根据我的逻辑 app.routes.ts 应该包含什么内容感到困惑。所以这是逻辑：我有以下组件：登录、用户、管理员我的应用程序组件包括登录组件。在我的登录组件中，我有一个渲染视图：

<div class="login" xmlns="http://www.w3.org/1999/html" *ngIf="!isLogged">
<label for="username">Username: </label>
<input type="text" id="username" [(ngModel)]="username"/>
<label for="password">password: </label>
<input type="password" id="password" [(ngModel)]="password"/>
<button id="login" (click)="login()"">Login</button>
</div>
<div *ngIf="isLogged" class="container">
<router-outlet name="user" *ngIf="access == 'user'"></router-outlet>
<router-outlet name="admin" *ngIf="access == 'admin'"></router-outlet>
</div>

如你所见，我想根据登录函数返回的数据来渲染用户组件或管理组件。

登录函数如下：

login() {
this._httpservice.postService('http://localhost:3000/authenticate', {username: this.username , password: this.password }).then(res => {
    this.access = res.role;
    if(this.access === 'user' || this.access === 'admin'){
        this.isLogged = true;
    }
});

}

我不知道如何构建路由文件，或者我可能缺少它的概念。所以请随时修改我的代码。

编辑： app.module.ts

`

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';
import { HttpService } from './http.service';
import { routes } from './app.router';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    AdminComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],
  providers: [HttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

<div class="login" xmlns="http://www.w3.org/1999/html" *ngIf="!isLogged">
<label for="username">Username: </label>
<input type="text" id="username" [(ngModel)]="username"/>
<label for="password">password: </label>
<input type="password" id="password" [(ngModel)]="password"/>
<button id="login" (click)="login()"">Login</button>
</div>

我猜这是来自您的登录组件

login() {
    this._httpservice.postService('http://localhost:3000/authenticate', {username: this.username , password: this.password }).then(res => {
            this.access = res.role;
            if(this.access === 'user' ){
                this.isLogged = true;
                this.router.navigate(['user']); 
            }
            if(this.access === 'admin'){
                 this.isLogged = true;
                 this.router.navigate(['admin']);
            }
        });
    }

并且您必须将用户和管理员路由连接到它们的组件！ app.module.ts:

const appRoutes: Routes = [
 { path: 'login', component: LoginComponent},
 { path: 'user', component: UserComponent},
 { path: 'admin', component: AdminComponent}
}

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

您的 app.component.ts 中需要 router-outlet:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Angular2根据从回调接收到的数据进行路由

Angular2 routing according to data received from callback

angular2-routing