Angular2 Routing nach Daten aus dem Rückruf

Question

Ich bin verwirrt, was Inhalt app.routes.ts sollte nach meiner Logik enthalten. also hier ist die Logik: Ich habe folgende Komponenten: Login, User, Admin Meine App-Komponente enthält die Login-Komponente. innerhalb Anmeldungs ​​Komponente habe ich diese Ansicht, die machen ist:

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

Wie man sehen kann ich Benutzerkomponente oder Admin-Komponente auf die Daten gemäß der Login-Funktion zurückgegeben werden soll machen.

die Login-Funktion ist die folgende:

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; 
    } 
}); 

}

Ich weiß nicht, wie die Routen-Datei zu erstellen oder vielleicht bin ich dabei das Konzept davon. so zögern Sie nicht, meinen Code zu ändern.

edit: 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> 

Im vermute, dass dies von Ihrem LoginComponent ist

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']); 
      } 
     }); 
    } 

und Sie müssen Benutzer und Admin Route eine Verbindung zum ihre Komponenten! 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 { } 

Sie benötigen einen router-outlet in Ihrem app.component.ts:

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

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