时间戳

首页 > 解决方案 > 登录主页后以角度 6 加载两次

html - 登录主页后以角度 6 加载两次

问题描述

由于我是 Angular 新手，所以我有一个登录页面。我点击了登录按钮，它重定向到主页，但它加载了两次。在我的 Angular Web 应用程序中，有不同的启动组件，即页眉、页脚、内容、左侧边栏。默认情况下，当我的应用程序加载和登录点击时，我隐藏了左侧边栏、页眉、页脚、内容。然后在点击登录按钮后，它的加载主页两次。所以我没有得到什么是问题。我正在使用 AdminLTE 模板。有人可以建议吗？

**login.component.html**

<body class="hold-transition login-page">
  <div class="login-box">
    <div class="login-logo">
      <a href="#"><b>OneMigrate</b></a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">Sign in to start your session</p>

      <form>
        <div class="form-group has-feedback">
          <input type="email" class="form-control" placeholder="Email">
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" placeholder="Password">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
          <!-- <div class="col-xs-8">
            <div class="checkbox icheck">
              <label>
                <input type="checkbox"> Remember Me
              </label>
            </div>
          </div> -->
          <!-- /.col -->
          <div class="col-xs-4"></div>
          <div class="col-xs-4">
            <button (click)="signin()" class="btn btn-primary btn-block btn-flat">Sign In</button>
          </div>
          <!-- /.col -->
          <div class="col-xs-4"></div>
        </div>
      </form>  
    </div>
    <!-- /.login-box-body -->
  </div>
  <!-- /.login-box -->

  </body>


  **app-routing.module.ts**

import { AdminDashboard2Component } from './../admin/admin-dashboard2/admin-dashboard2.component';
import { AdminDashboard1Component } from './../admin/admin-dashboard1/admin-dashboard1.component';
import { StarterComponent } from './../starter/starter.component';
import { NewRunDetailsComponent } from '../newrundetails/new-run-details.component'
import { EnvironmentSettingComponent } from '../environmentsetting/environment-setting.component';
import { AdminComponent } from './../admin/admin.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeComponent } from  '../home/home.component';
import { RunDetailsComponent } from '../rundetails/run-details.component'
import { UploadfileComponent}  from  '../uploadfile/uploadfile.component';
import { RunhistoryComponent} from '../runhistory/runhistory.component';
import { AppInsightsService } from '../services/app-insights.service';
import { DetailrunhistoryComponent} from '../detailrunhistory/detailrunhistory.component';
import { PendingRunsComponent } from '../pendingruns/pendingruns.component';
import { PendingRunsDetailComponent} from '../pendingrunsdetail/pendingrunsdetail.component';
import { LoginComponent } from '../login/login.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: '', redirectTo: '/login', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'newrundetails', component: NewRunDetailsComponent },
      { path: 'environmentsetting', component: EnvironmentSettingComponent},
      { path: 'rundetails', component: RunDetailsComponent},
      { path: 'pendingruns', component: PendingRunsComponent},
      { path: 'runhistory', component: RunhistoryComponent},
      { path: 'detailrunhistory', component:DetailrunhistoryComponent},
      { path: 'pendingrunsdetail',component:PendingRunsDetailComponent},
      { path: 'login',component:LoginComponent},

    ],{ useHash: true })
  ],
  declarations: [],
  exports: [ RouterModule]


})
export class AppRoutingModule { }

**login.component.ts**

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // public wrapper: boolean = false;
  constructor(private router: Router) { }

  ngOnInit() {
  }

  signin(){
  this.router.navigate(['home']);      
  }
}


**app.component.ts**

import { Component, OnInit } from '@angular/core';
import { Router,NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {
  public title = 'app';
 public wrappercontent: boolean = false; 

  constructor(private router: Router) {

  }

  ngOnInit(): void {
    // debugger;
    this.router.navigate(['login']);
    // this.wrappercontent=true;    

    this.router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        if (event['url'] == '/login') {   
          this.wrappercontent=false;
        } else{      
          this.wrappercontent=true;     
        }
      }
     });
 }
}


 **app.component.html**

<router-outlet></router-outlet>  

<body hold-transition="" class="skin-blue sidebar-mini" style="height: auto;"> 
<div class="wrapper" *ngIf="wrappercontent"> 
       <app-starter-header ></app-starter-header>
       <app-starter-left-side></app-starter-left-side>
       <app-starter-content></app-starter-content> 
       <app-starter-footer></app-starter-footer>
       <app-starter-control-sidebar></app-starter-control-sidebar>
       <div class="control-sidebar-bg"></div>    
</div>
</body>

**home.component.html**
<div class="row img_full" *ngIf="this.show">
  <div class="col-sm-1"></div>
  <div class="col-sm-8">
    <div>
      <div>
        <h3 class="box-title"></h3>
      </div>
      <div class="loader" *ngIf="showLoader"><i class="fa fa-spinner fa-spin"></i></div>
      <div class="box-body" *ngIf="!showLoader">
        <div class="row">
          <div class="col-sm-1"></div>
          <div class="col-sm-4">
            <button (click)="newRun()" class="pull-right button newRun">
              <img src="/assets/images/NewRun_white.png" class="newrun_btn" /> NEW RUN
            </button>
          </div>
          <div class="col-sm-1"></div>
          <div class="col-sm-4">
            <button (click)="settings()" class="pull-right button settingEnv">
              <img src="/assets/images/E_Setting.png" class="newrun_btn" /> SETTINGS
            </button>
          </div>
          <div class="col-sm-2">
          </div>
        </div>
        <div>
          <br>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-2"></div>
</div>

标签： htmlcssangularangular6

解决方案

推荐阅读