Question

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

在class.component.html

中

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'];
  }

页面应该导航到目标。使用浏览器后退按钮时问题仍然存在。从 class.component.html 导航到 classlist.component.html 后，如果我按下浏览器后退按钮导航回class.component.html，则所有元素都会ngFor不渲染。如果我点击刷新ngFor return / show的所有元素。

classlist.component.ts

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

classlist.component.html

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

它正确输出ActivatedRoute快照＆＃34;文件夹＆＃34;从URL，但当我点击浏览器后退按钮返回 class.component.html 时，所有DOM元素都消失了。我必须重新加载页面才能返回

app.module.ts

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

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

这个href工作

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

而不是

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

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

struct GlobalConstants {

    struct Refs {
        static let userRef = AppDatabaseReference.users(uid: (Auth.auth().currentUser?.uid)!).reference()
        static let currentUser = Auth.auth().currentUser?.uid
    }

}

从问题集合中检索数据时， [routerLink] 在 ngFor 中使用 [routerLink] 似乎唯一存在的问题

p>

我看了一遍解决方案。是否有解决方案或我在哪里犯错误？

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

0 个答案: