Javascript 角度延迟加载组件，仅在刷新后加载

我在一个延迟加载的模块中有一个仪表板组件

在我的登录组件中，我有一个按钮，可以通过router.navigate导航到仪表板组件

但是，当我单击按钮时，尽管它导航到正确的路线，但它不会显示组件。它只显示应用程序组件

但是，如果我刷新页面，它就会加载。快把我逼疯了。如果我开一张新的账单，走同样的路线，一切都会好起来。但当我单击通过routerlink导航的按钮时，它似乎没有加载它

sign-in.component.html

<form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button (click) = "authenticateUser()"  class="btn btn-primary">Sign In</button>
</form>


<router-outlet></router-outlet>

<div *ngIf = "url=='/sign-up' || url =='/sign-in'">
<!-- <div class = "head">
  <img class = "logo" src = "assets/img/quickList1.jpeg">
  <app-sign-up></app-sign-up>
</div> -->
<div class = "my-container">
  <div [ngStyle] = "{'height':url == '/sign-up' ? '500px' : '300px' }" class = "form-box">
    <h1 style = "text-align:center;margin-top:12px;">QuickList {{url}}</h1>
    <div class = "signForm">
        <div *ngIf="url == '/sign-in'; else elseBlock"><app-sign-in></app-sign-in></div>
        <ng-template #elseBlock><app-sign-up></app-sign-up></ng-template>
  </div>
  </div>
  <div class = "alternate-box">
    <div class = "prompt">
      <div *ngIf="url == '/sign-in'; else loginPrompt">Don't have an account? <a routerLink = '/sign-up'>Sign up</a></div>
      <ng-template #loginPrompt>Have an account? <a routerLink = '/sign-in'>Sign In</a></ng-template>
    </div>
  </div>
</div>

</div>

<router-outlet></router-outlet>

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <img src = "assets/img/hashtag.png">
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Number of Mail Lists</p>
              <p class="card-title">10
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <img src = "assets/img/at.png">
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Total Number of Emails</p>
              <p class="card-title">1,345
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
      </div>
    </div>
  </div>
  <!-- <div class="col-lg-3 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <i class="nc-icon nc-vector text-danger"></i>
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Errors</p>
              <p class="card-title">23
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
        <div class="stats">
          <i class="fa fa-clock-o"></i> In the last hour
        </div>
      </div>
    </div>
  </div> -->
  <div>
    <div class="card card-stats">
    </div>
  </div>
</div>
<!-- <div class="row">
  <div class="col-md-12">
    <div class="card ">
      <div class="card-header ">
        <h5 class="card-title">Users Behavior</h5>
        <p class="card-category">24 Hours performance</p>
      </div>
      <div class="card-body ">
        <canvas id=chartHours width="400" height="100"></canvas>
      </div>
      <div class="card-footer ">
        <hr>
        <div class="stats">
          <i class="fa fa-history"></i> Updated 3 minutes ago
        </div>
      </div>
    </div>
  </div>
</div> -->
<div class="row">
  <div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%" class="col-md-5">
    <div class="card ">
      <div class="card-header ">
        <h5 class="card-title"><i class="nc-icon nc-bullet-list-67"></i> Manage your mailing lists</h5>
        <p class="card-category">Create, delete, add emails etc</p>
      </div>
      <div class="card-body ">
          <ul>
              <li>Insurance Companies</li>
              <li>Medical Companies</li>
              <li>Fin Tech</li>
              <li>Web Dev</li>
              <li>Accounting</li>
              <li>Law Firms</li>
            </ul>
      </div>
      <div class="card-footer ">
        <p>Recently created lists.</p>
        <!-- <div class="legend">
          <i class="fa fa-circle text-primary"></i> Opened
          <i class="fa fa-circle text-warning"></i> Read
          <i class="fa fa-circle text-danger"></i> Deleted
          <i class="fa fa-circle text-gray"></i> Unopened
        </div> -->
        <hr>
        <!-- <div class="stats">
          <i class="fa fa-calendar"></i> Number of emails sent
        </div> -->
      </div>
    </div>
  </div>

    <div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%;" class="col-md-5">
      <div class="card ">
        <div class="card-header ">
          <h5 class="card-title"><i class="nc-icon nc-zoom-split text-success"></i> Find Emails</h5>
          <p class="card-category">Reach your target audience using search!</p>
        </div>
        <div class="card-body ">
          <ul>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
          </ul>
        </div>
        <div class="card-footer ">
          <p>Recently generated emails</p>
          <hr>
          <!-- <div class="stats">
            <i class="fa fa-calendar"></i> Number of emails sent
          </div> -->
        </div>
      </div>

  <typography-cmp></typography-cmp>

<router-outlet></router-outlet>

dashboard.component.ts

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

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  moduleId: module.id,
  styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent implements OnInit {

  constructor(private router:Router) { }

  authenticateUser(){
    //Make request to signin endpoint, if successful save profile details and navigate to dashboard
    this.router.navigate(['/dashboard'])
  }

  ngOnInit() {
  }

}

import { Component} from '@angular/core';
import Chart from 'chart.js';


@Component({
    selector: 'dashboard-cmp',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html'
})

export class DashboardComponent{
  constructor(){
  }


}

app.component.html

<form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button (click) = "authenticateUser()"  class="btn btn-primary">Sign In</button>
</form>


<router-outlet></router-outlet>

<div *ngIf = "url=='/sign-up' || url =='/sign-in'">
<!-- <div class = "head">
  <img class = "logo" src = "assets/img/quickList1.jpeg">
  <app-sign-up></app-sign-up>
</div> -->
<div class = "my-container">
  <div [ngStyle] = "{'height':url == '/sign-up' ? '500px' : '300px' }" class = "form-box">
    <h1 style = "text-align:center;margin-top:12px;">QuickList {{url}}</h1>
    <div class = "signForm">
        <div *ngIf="url == '/sign-in'; else elseBlock"><app-sign-in></app-sign-in></div>
        <ng-template #elseBlock><app-sign-up></app-sign-up></ng-template>
  </div>
  </div>
  <div class = "alternate-box">
    <div class = "prompt">
      <div *ngIf="url == '/sign-in'; else loginPrompt">Don't have an account? <a routerLink = '/sign-up'>Sign up</a></div>
      <ng-template #loginPrompt>Have an account? <a routerLink = '/sign-in'>Sign In</a></ng-template>
    </div>
  </div>
</div>

</div>

<router-outlet></router-outlet>

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <img src = "assets/img/hashtag.png">
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Number of Mail Lists</p>
              <p class="card-title">10
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <img src = "assets/img/at.png">
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Total Number of Emails</p>
              <p class="card-title">1,345
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
      </div>
    </div>
  </div>
  <!-- <div class="col-lg-3 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <i class="nc-icon nc-vector text-danger"></i>
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Errors</p>
              <p class="card-title">23
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
        <div class="stats">
          <i class="fa fa-clock-o"></i> In the last hour
        </div>
      </div>
    </div>
  </div> -->
  <div>
    <div class="card card-stats">
    </div>
  </div>
</div>
<!-- <div class="row">
  <div class="col-md-12">
    <div class="card ">
      <div class="card-header ">
        <h5 class="card-title">Users Behavior</h5>
        <p class="card-category">24 Hours performance</p>
      </div>
      <div class="card-body ">
        <canvas id=chartHours width="400" height="100"></canvas>
      </div>
      <div class="card-footer ">
        <hr>
        <div class="stats">
          <i class="fa fa-history"></i> Updated 3 minutes ago
        </div>
      </div>
    </div>
  </div>
</div> -->
<div class="row">
  <div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%" class="col-md-5">
    <div class="card ">
      <div class="card-header ">
        <h5 class="card-title"><i class="nc-icon nc-bullet-list-67"></i> Manage your mailing lists</h5>
        <p class="card-category">Create, delete, add emails etc</p>
      </div>
      <div class="card-body ">
          <ul>
              <li>Insurance Companies</li>
              <li>Medical Companies</li>
              <li>Fin Tech</li>
              <li>Web Dev</li>
              <li>Accounting</li>
              <li>Law Firms</li>
            </ul>
      </div>
      <div class="card-footer ">
        <p>Recently created lists.</p>
        <!-- <div class="legend">
          <i class="fa fa-circle text-primary"></i> Opened
          <i class="fa fa-circle text-warning"></i> Read
          <i class="fa fa-circle text-danger"></i> Deleted
          <i class="fa fa-circle text-gray"></i> Unopened
        </div> -->
        <hr>
        <!-- <div class="stats">
          <i class="fa fa-calendar"></i> Number of emails sent
        </div> -->
      </div>
    </div>
  </div>

    <div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%;" class="col-md-5">
      <div class="card ">
        <div class="card-header ">
          <h5 class="card-title"><i class="nc-icon nc-zoom-split text-success"></i> Find Emails</h5>
          <p class="card-category">Reach your target audience using search!</p>
        </div>
        <div class="card-body ">
          <ul>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
          </ul>
        </div>
        <div class="card-footer ">
          <p>Recently generated emails</p>
          <hr>
          <!-- <div class="stats">
            <i class="fa fa-calendar"></i> Number of emails sent
          </div> -->
        </div>
      </div>

  <typography-cmp></typography-cmp>

<router-outlet></router-outlet>

延迟加载模块路由

import { Routes } from '@angular/router';

import { DashboardComponent } from '../../pages/dashboard/dashboard.component';
import { UserComponent } from '../../pages/user/user.component';
import { TableComponent } from '../../pages/table/table.component';
import { TypographyComponent } from '../../pages/typography/typography.component';
import { IconsComponent } from '../../pages/icons/icons.component';
import { MapsComponent } from '../../pages/maps/maps.component';
import { NotificationsComponent } from '../../pages/notifications/notifications.component';
import { UpgradeComponent } from '../../pages/upgrade/upgrade.component';

export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard',      component: DashboardComponent },
    { path: 'user',           component: UserComponent },
    { path: 'maillists',          component: TableComponent },
    { path: 'typography',     component: TypographyComponent },
    { path: 'icons',          component: IconsComponent },
    { path: 'emails-found',           component: MapsComponent },
    { path: 'find-emails',  component: NotificationsComponent },
    { path: 'upgrade',        component: UpgradeComponent }
];

dashboard.component.html

<form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button (click) = "authenticateUser()"  class="btn btn-primary">Sign In</button>
</form>


<router-outlet></router-outlet>

<div *ngIf = "url=='/sign-up' || url =='/sign-in'">
<!-- <div class = "head">
  <img class = "logo" src = "assets/img/quickList1.jpeg">
  <app-sign-up></app-sign-up>
</div> -->
<div class = "my-container">
  <div [ngStyle] = "{'height':url == '/sign-up' ? '500px' : '300px' }" class = "form-box">
    <h1 style = "text-align:center;margin-top:12px;">QuickList {{url}}</h1>
    <div class = "signForm">
        <div *ngIf="url == '/sign-in'; else elseBlock"><app-sign-in></app-sign-in></div>
        <ng-template #elseBlock><app-sign-up></app-sign-up></ng-template>
  </div>
  </div>
  <div class = "alternate-box">
    <div class = "prompt">
      <div *ngIf="url == '/sign-in'; else loginPrompt">Don't have an account? <a routerLink = '/sign-up'>Sign up</a></div>
      <ng-template #loginPrompt>Have an account? <a routerLink = '/sign-in'>Sign In</a></ng-template>
    </div>
  </div>
</div>

</div>

<router-outlet></router-outlet>

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <img src = "assets/img/hashtag.png">
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Number of Mail Lists</p>
              <p class="card-title">10
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
      </div>
    </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <img src = "assets/img/at.png">
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Total Number of Emails</p>
              <p class="card-title">1,345
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
      </div>
    </div>
  </div>
  <!-- <div class="col-lg-3 col-md-6 col-sm-6">
    <div class="card card-stats">
      <div class="card-body ">
        <div class="row">
          <div class="col-5 col-md-4">
            <div class="icon-big text-center icon-warning">
              <i class="nc-icon nc-vector text-danger"></i>
            </div>
          </div>
          <div class="col-7 col-md-8">
            <div class="numbers">
              <p class="card-category">Errors</p>
              <p class="card-title">23
                <p>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer ">
        <hr>
        <div class="stats">
          <i class="fa fa-clock-o"></i> In the last hour
        </div>
      </div>
    </div>
  </div> -->
  <div>
    <div class="card card-stats">
    </div>
  </div>
</div>
<!-- <div class="row">
  <div class="col-md-12">
    <div class="card ">
      <div class="card-header ">
        <h5 class="card-title">Users Behavior</h5>
        <p class="card-category">24 Hours performance</p>
      </div>
      <div class="card-body ">
        <canvas id=chartHours width="400" height="100"></canvas>
      </div>
      <div class="card-footer ">
        <hr>
        <div class="stats">
          <i class="fa fa-history"></i> Updated 3 minutes ago
        </div>
      </div>
    </div>
  </div>
</div> -->
<div class="row">
  <div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%" class="col-md-5">
    <div class="card ">
      <div class="card-header ">
        <h5 class="card-title"><i class="nc-icon nc-bullet-list-67"></i> Manage your mailing lists</h5>
        <p class="card-category">Create, delete, add emails etc</p>
      </div>
      <div class="card-body ">
          <ul>
              <li>Insurance Companies</li>
              <li>Medical Companies</li>
              <li>Fin Tech</li>
              <li>Web Dev</li>
              <li>Accounting</li>
              <li>Law Firms</li>
            </ul>
      </div>
      <div class="card-footer ">
        <p>Recently created lists.</p>
        <!-- <div class="legend">
          <i class="fa fa-circle text-primary"></i> Opened
          <i class="fa fa-circle text-warning"></i> Read
          <i class="fa fa-circle text-danger"></i> Deleted
          <i class="fa fa-circle text-gray"></i> Unopened
        </div> -->
        <hr>
        <!-- <div class="stats">
          <i class="fa fa-calendar"></i> Number of emails sent
        </div> -->
      </div>
    </div>
  </div>

    <div style = "display:block; margin-left:auto; margin-right:auto; margin-top:5%;" class="col-md-5">
      <div class="card ">
        <div class="card-header ">
          <h5 class="card-title"><i class="nc-icon nc-zoom-split text-success"></i> Find Emails</h5>
          <p class="card-category">Reach your target audience using search!</p>
        </div>
        <div class="card-body ">
          <ul>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
            <li>info@info.com</li>
          </ul>
        </div>
        <div class="card-footer ">
          <p>Recently generated emails</p>
          <hr>
          <!-- <div class="stats">
            <i class="fa fa-calendar"></i> Number of emails sent
          </div> -->
        </div>
      </div>

  <typography-cmp></typography-cmp>

<router-outlet></router-outlet>

邮件列表的数量
10


电子邮件总数
1345


管理您的邮件列表
创建、删除、添加电子邮件等


保险公司
医疗公司
财务技术
网络开发
会计
律师事务所

最近创建的列表


查找电子邮件
使用搜索功能联系您的目标受众

info@info.com
info@info.com
info@info.com
info@info.com
info@info.com
info@info.com

最近生成的电子邮件

请使用显示如何显示仪表板组件的源代码更新您的问题。我猜问题出在其他地方，与懒散加载无关。我要调试的第一件事是，将console.log或调试器添加到lazyloaded模块的构造函数和ngOnInit中，并检查有什么不同。@mr.alex，我向仪表板组件的构造函数添加了一个警报，即使仪表板组件html未加载，警报仍在执行。但是，当我刷新时，会执行警报并加载html请添加路由模块和延迟加载模块的代码谢谢您的评论！我花了几个小时寻找一个类似的问题，“url发生了变化，但如果我刷新页面，导航就可以正常工作”。据说我的路由器出口处有一个*ngIf=“（enViewMode$| async）==enViewMode.fullscreen”，条件在ngOnInit刚刚满足。请用显示如何显示仪表板组件的源代码更新您的问题。我想问题出在其他地方，与lazyloading无关。我要调试的第一件事是，将console.log或调试器添加到lazyloaded模块的构造函数和ngOnInit中，并检查有什么不同。@mr.alex，我向仪表板组件的构造函数添加了一个警报，即使仪表板组件html未加载，警报仍在执行。但是，当我刷新时，会执行警报并加载html请添加路由模块和延迟加载模块的代码谢谢您的评论！我花了几个小时寻找一个类似的问题，“url发生了变化，但如果我刷新页面，导航就可以正常工作”。结果显示，我的路由器出口处有一个*ngIf=“（enViewMode$| async）===enViewMode.fullscreen”，并且条件在ngOnInit得到满足。