angular - ngfor routerlink 浏览器后退按钮错误 Angular2/4

Question

我有一个带有 ngFor 的 Angular 应用程序，它从 firestore 集合中检索值，然后放置在 [routerLink] 中以导航到列表页面

在 class.component.html

<div class="container-fluid">
  <div *ngFor="let folder of folders" class="col-3">
    <a [routerLink]="[`/class/board/${folder?.folder}`]">
      <div class="folder">
        <h6>{{folder?.folder}}</h6>
      </div>
    </a>
  </div>
</div>

页面按应有的方式导航到其目标。使用浏览器后退按钮时问题仍然存在。从class.component.html导航到classlist.component.html后，如果我按浏览器的后退按钮导航回 class.component.html，则 ngFor 的所有元素都不会呈现。如果我点击刷新 ngFor 返回/显示的所有元素。

classlist.component.ts

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

export class ClasslistComponent implements OnInit {
folder:any;

  constructor(private urlId:ActivatedRoute) {
    this.folder = urlId.snapshot.params['folder'];
  }

classlist.component.html

<p>{{folder}}<p> //<-- outputs "drywall"

它正确地从 URL 输出 ActivatedRoute 快照“文件夹”，但是当我单击浏览器返回按钮返回到class.component.html 时，所有 DOM 元素都消失了。我必须重新加载页面才能返回所有内容

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FacebookModule } from 'ngx-facebook';
import { HttpModule } from '@angular/http';
import {HttpClientModule} from '@angular/common/http'
import {RouterModule, ActivatedRoute, Routes} from '@angular/router';

const appRoutes: Routes = [
{path:'dashboard', component:DashboardComponent},
{path:'guestlist', component:GuestComponent},
{path:'login', component:LoginComponent},
{path:'settings', component:SettingsComponent},
{path:'chat/:chatId', component:ChatsComponent},
{path:'taskmanager', component:TodoComponent},
{path:'class/board/:folder', component:ClasslistComponent},
{path:'class', component:ClassComponent},
{path:'', component:HomeComponent},
{path:'**', component:ErrorComponent}
]

BrowserModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(environment.firebase, 'charting'),
HttpModule,
HttpClientModule,
ReactiveFormsModule,
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireStorageModule,
FormsModule,
FlashMessagesModule.forRoot(),
FacebookModule.forRoot()

如果我直接使用 href 而不是 routerLink 我使用浏览器后退按钮没有问题。所有 ngFor 元素在第一次加载时呈现，无需刷新。

这个href有效

<a href="/class/board/{{folder?.folder}}">

而不是

<a [routerLink]="['/class/board/'+folder?.folder]">

另外，如果我直接从文档中使用 routerlink 它也可以

<a [routerLink]="['/class/board/'+listitem?.item]">

似乎问题持续存在的唯一时间是在从集合中检索数据时在ngFor内部使用[routerLink]

我到处寻找解决方案。有没有解决方案或者我在哪里犯了错误？