无法在Angular2中正确提供路由

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

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

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

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

1. 然后登录页面，设置this.showSideNav = false
2. 对于其他路线，请设置this.showSideNav = true