执行导航方法后，上一个组件不会消失

Question

执行导航方法后，上一个组件不会消失。我的新组件出现在旧组件的底部。我应该怎么做才能单独显示新的导航组件？当我直接重定向到新组件时，会显示空白视图。为了生成我使用的组件ng g c componentName。

导航：

this.router.navigate(['dashboard'], {relativeTo: this.route});

新组件：

export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

}

路由器：

const routes: Routes = [

  { path : "dashboard", component : DashboardComponent},

  {path : "**", component: PageNotFoundComponent}]

@NgModule({

  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],

  exports: [RouterModule]

})

export class AppRoutingModule {  }

export const routingComponents =[DashboardComponent, PageNotFoundComponent]

项目结构：

模板

<div class="bg">

  <div class="container">

      <div class="row">

          <div class='col-md-3'></div>

          <div class="col-md-6">

              <div class="login-box well">

                          <legend>Sign In</legend>

                          <div class="form-group">

                              <input id="username-email" placeholder="E-mail or Username" type="text" [(ngModel)]="username" class="form-control" />

                          </div>

                          <div class="form-group">

                              <input id="password" placeholder="Password" type="text" class="form-control" [(ngModel)]="password"/>

                          </div>

                          <div class="input-group">

                            <div class="checkbox">

                              <label>

                                <input id="login-remember" type="checkbox" name="remember"  [(ngModel)]="remember"> Remember me

                              </label>

                            </div>

                          </div>

Answer 1

根据您目前提供的信息，您似乎一直在尝试从登录页面导航到仪表板。您仍然可以看到登录页面字段以及底部的仪表板内容。这是有道理的，因为路由器将在router-outlet. 但是您的登录组件不是加载到router-outlet.在这种情况下，您将创建一个包含以下内容的 LoginComponent：<div class="bg">&nbsp; <div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class='col-md-3'></div>&nbsp; &nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; &nbsp; <div class="login-box well">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <legend>Sign In</legend>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="username-email" placeholder="E-mail or Username" type="text" [(ngModel)]="username" class="form-control" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="password" placeholder="Password" type="text" class="form-control" [(ngModel)]="password" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="login-remember" type="checkbox" name="remember"&nbsp; [(ngModel)]="remember"> Remember me&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input (click)="loginButtonClick()" id="login_button" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class='text-center'><a href="/resetting/request" class="text-sm">Forgot Password?</a></span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class='col-md-3'></div>&nbsp; &nbsp; </div>&nbsp; </div></div>然后你的 RouterConfig 看起来像这样：const routes: Routes = [{&nbsp; &nbsp; path: "dashboard",&nbsp; &nbsp; component: DashboardComponent,&nbsp; &nbsp; canActivate: [CanActivateDashboard], // This is a guard that you'll have to add&nbsp; },&nbsp; {&nbsp; &nbsp; path: "login",&nbsp; &nbsp; component: LoginComponent&nbsp; },&nbsp; {&nbsp; &nbsp; path: "**",&nbsp; &nbsp; component: PageNotFoundComponent&nbsp; }]@NgModule({&nbsp; imports: [RouterModule.forRoot(routes, {&nbsp; &nbsp; onSameUrlNavigation: 'reload'&nbsp; })],&nbsp; exports: [RouterModule]})export class AppRoutingModule {}export const routingComponents = [DashboardComponent, PageNotFoundComponent]默认情况下，您将加载/login路由，您的用户将通过该路由在视图中看到 LoginComponent 的内容。由于现在将使用 Router 加载它，并且内容将加载到 上<router-outlet>，因此一旦用户导航到路由，只会DashboardComponent将内容加载到 上。<router-outlet>/dashboardPS：请注意，未经授权的用户应该无法直接导航到/dashboard. 因此，您还必须创建一个Guard以防止这种情况发生。