我有一个Angular应用程序,其中ngFor从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 return / show的所有元素 .

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快照"folder"但是当我单击浏览器后退按钮返回 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]">

如果我直接从doc使用routerlink也可以

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

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

我到处寻找解决方案 . 是否有解决方案或我在哪里犯错误?