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

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

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

          <div class="form-group">

            <input (click)="loginButtonClick()" id="login_button" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" />

          </div>

          <span class='text-center'><a href="/resetting/request" class="text-sm">Forgot Password?</a></span>

        </div>

      </div>

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

    </div>

  </div>

</div>

然后你的 RouterConfig 看起来像这样：

const routes: Routes = [{

    path: "dashboard",

    component: DashboardComponent,

    canActivate: [CanActivateDashboard], // This is a guard that you'll have to add

  },

  {

    path: "login",

    component: LoginComponent

  },

  {

    path: "**",

    component: PageNotFoundComponent

  }

]

@NgModule({

  imports: [RouterModule.forRoot(routes, {

    onSameUrlNavigation: 'reload'

  })],

  exports: [RouterModule]

})

export class AppRoutingModule {}

export const routingComponents = [DashboardComponent, PageNotFoundComponent]

默认情况下，您将加载/login路由，您的用户将通过该路由在视图中看到 LoginComponent 的内容。由于现在将使用 Router 加载它，并且内容将加载到 上<router-outlet>，因此一旦用户导航到路由，只会DashboardComponent将内容加载到 上。<router-outlet>/dashboard

PS：请注意，未经授权的用户应该无法直接导航到/dashboard. 因此，您还必须创建一个Guard以防止这种情况发生。