根據從回調接收的數據的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> 

即時猜測這是從你的LoginComponent

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!'; 
}