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

  <router-outlet>
    
  </router-outlet>

  <footer class="fixed-bottom">

      <!-- Copyright -->
      <div class="footer-copyright text-center py-3">© 2018 Copyright:
        <a href=""> worko.com</a>
      </div>
      <!-- Copyright -->
    
    </footer>
</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-outlet>上，因此，一旦用户导航到{{1 }}路线。

PS：请注意，未经授权的用户应该不能直接导航到DashboardComponent。因此，您还必须创建一个<router-outlet>来防止这种情况。

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

1 个答案: