Question

我很困惑app.routes.ts根据我的逻辑应该包含哪些内容。所以这是逻辑：我有以下组件：登录，用户，管理员我的app组件包含登录组件。在我的登录组件中，我有那个呈现的视图：

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

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

1 个答案: