Question

我正在创建一个登录应用程序，用户必须登录，登录后，如果用户有效，则需要将其重定向到给定页面。

登录和重定向工作。

问题： 在“登录”页面中，我的侧面导航菜单也可见。它应该只显示在其他路线中。

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HeaderComponent } from './header/header.component';
import { RouterModule, Routes } from '@angular/router';
import {HttpModule} from '@angular/http';
import {MatButtonModule, MatCheckboxModule, MatSidenavModule} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'Details', component: DetailsComponent },
  { path: 'UserConfig', component: UserconfigComponent },
  {path:'',redirectTo:'/login',pathMatch:'full'},
  {path:'**',redirectTo:'/login',pathMatch:'full'},

];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    FooterComponent,
    HeaderComponent,
    CardDetailsComponent,
    UserconfigComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpModule,
    MatButtonModule,
    MatCheckboxModule,
    MatSidenavModule,
    MatIconModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    Ng4LoadingSpinnerModule.forRoot()
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component.html

<div id="fullpage">
  <app-header class="header"></app-header>

  <mat-sidenav-container>
    <mat-sidenav  #sideNav opened="false" mode="side">
      <ul>
        <li routerLinkActive="active current"><a  routerLink="/CardDetails">Card Details</a ></li>
        <li><a routerLink="/UserConfig">User Config</a></li>
      </ul>  
    </mat-sidenav>
    <mat-icon (click)="sideNav.toggle()" class="home_btn">
      Menu
    </mat-icon>
  <router-outlet></router-outlet>

  </mat-sidenav-container>

 <app-footer></app-footer>

</div>

Login.component.ts

Loginuser(data) {
      const dataObj = {Email: data.Email, Password: data.Password};
      this.serv.getLogin(dataObj).subscribe(res => {
        if (res.id == 0) {
          alert('please check the username or password');
        } else {
          console.log(res);
          localStorage.setItem('Data', JSON.stringify(res));
          this.router.navigate(['/CardDetails']);
        }
      });

    }

在登录页面本身，菜单显示的地方我犯了一个错误，我不知道它在哪里

Answer 1

由于您的<mat-sidenav-container>位于<router-outlet>容器之外，因此无论哪条路线处于活动状态，它都会始终显示。

您有两种可能性：

1）如果用户已登录，则仅显示<mat-sidenav>，<mat-icon>。例如，您可以检查localStorage中的AuthToken是否存在且有效。 *ngIf="isUserLoggedIn"

2）您的AppComponent模板中只有一个<router-outlet></router-outlet>，没有别的。然后，您在<router-outlet>模板下面有第二个UserRouterComponent，这次是<side-nav>。应显示侧导航的路线是UserRouterComponent的子路线。您的路线配置类似于：

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'user', component: UserRouterComponent  children: [
    { path: 'details', component: DetailsComponent },
    { path: 'config', component: UserconfigComponent }
  ]};

从app.component.html中的user-router.component.html复制模板。

您的app.component.html：

<router-outlet></router-outlet>

Answer 2

您可以通过以下方式拦截路线更改：

main(){
//do Something
//create instance of ::testing::Values type
//pass arguments to  multiple test points
//run_tests
}

每当导航开始时，您都可以检查路线名称：

然后登录页面，设置constructor(private router: Router) { router.events.subscribe((event: RouterEvent) => { this.navigationInterceptor(event); }); } navigationInterceptor(event: RouterEvent): void { if (event instanceof NavigationStart) { this.currentUrl = event.url; // Do something with the url // For url login, set this.showSideNav = false // For others, sset this.showSideNav = true } }
对于其他路线，请设置this.showSideNav = false

无法在Angular2中正确提供路由

2 个答案: