Angular 单击“上一步”并再次单击是否会引发错误？

在第一次渲染组件时，一切正常，但当我按browser back按钮并再次单击指向该组件的链接时，它会断开

profile-page.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ProfilePageComponent } from './profile-page.component';
import { FirebaseUIModule } from 'firebaseui-angular';
import { RouterModule, Routes } from '@angular/router';

import { AppHeaderNavbarModule } from '../../../containers/app-header-navbar';
import { ProfileNavigatorModule } from './profile-navigator';

import { MatCardModule } from '@angular/material';
import { InlineEditorModule } from 'ng2-inline-editor';

const routes: Routes = [
  { path: 'profile/:id', component: ProfilePageComponent}
];

@NgModule({
  imports: [
    CommonModule,
    FirebaseUIModule,
    FormsModule,
    MatCardModule,
    InlineEditorModule,
    AppHeaderNavbarModule,
    ProfileNavigatorModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ProfilePageComponent]
})
export class ProfilePageModule {
}

profile-page.component.ts

import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';    
import { Route, ActivatedRoute } from '@angular/router';
import { UserProfile } from '../../../shared/models/user-profile';
import { AuthService } from '../../../shared/services/auth.service';
import { Observable } from 'rxjs/Observable';

import { environment } from '../../../../environments/environment';
import { constants } from '../../../../constants';

@Component({
  selector: 'profile-page',
  templateUrl: './profile-page.component.html',
  styleUrls: ['./profile-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class ProfilePageComponent implements OnInit {

  id: string;
  private sub: any;

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  constructor(
    private route: ActivatedRoute,
    private authService: AuthService
  ) {
  }

  ngOnInit(): void {
      this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
      });
  }

  isLoggedin() {
    return this.authService.getCurrentUser() != null;
  }
}

错误：

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at FirebaseUIComponent.ngOnDestroy (index.js:132)
    at callProviderLifecycles (core.js:12434)
    at callElementProvidersLifecycles (core.js:12399)
    at callLifecycleHooksChildrenFirst (core.js:12383)
    at destroyView (core.js:13727)
    at callViewAction (core.js:13878)
    at execComponentViewsAction (core.js:13790)
    at destroyView (core.js:13726)
    at callWithDebugContext (core.js:14740)
    at Object.debugDestroyView [as destroyView] (core.js:14291)
    at FirebaseUIComponent.ngOnDestroy (index.js:132)
    at callProviderLifecycles (core.js:12434)
    at callElementProvidersLifecycles (core.js:12399)
    at callLifecycleHooksChildrenFirst (core.js:12383)
    at destroyView (core.js:13727)
    at callViewAction (core.js:13878)
    at execComponentViewsAction (core.js:13790)
    at destroyView (core.js:13726)
    at callWithDebugContext (core.js:14740)
    at Object.debugDestroyView [as destroyView] (core.js:14291)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)

编辑：

问题是在父组件中，当我使用firebase ui从该组件导航到其他组件，然后返回，然后再次单击其他组件时，我会出现上述错误，因为

第二次返回按钮（）未被触发，但在尝试再次导航时（）被触发

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../shared/services/auth.service';
import { FirebaseUISignInSuccess } from 'firebaseui-angular';

@Component({
  selector: 'app-home',
  template: `
          <div class="page-content">
            <firebase-ui (signInSuccess)="successCallback($event)"></firebase-ui>
            <router-outlet *ngIf="isLoggedin()"></router-outlet>
          </div>
`,
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private authService: AuthService) {
  }

  ngOnInit(): void {
    console.log('homepage:user::' + this.authService.getCurrentUser());
  }

  successCallback(data: FirebaseUISignInSuccess) {
    console.log('data:' + data);
  }
}

从'@angular/core'导入{Component，OnInit}；
从“../../../shared/services/auth.service”导入{AuthService}；
从'firebaseui'导入{firebaseusigninsucess}；
@组成部分({
选择器：“应用程序主页”，
模板：`
`,
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
构造函数（专用authService:authService）{
}
ngOnInit（）：void{
console.log（'homepage:user:：'+this.authService.getCurrentUser（））；
}
successCallback（数据：FireBaseUISignensAccess）{
console.log（'数据：'+数据）；
}
}

在您描述的条件下，您的问题似乎是订阅尚未初始化。您正在对未定义的子变量调用unsubscribe。您应该在取消订阅之前检查sub是否存在。例如：

ngOnDestroy() {
  if(this.sub) {    
    this.sub.unsubscribe();
  }
}

还值得注意的是，根据文档，没有必要取消订阅ActivatedRoute。参考：

在订阅组件中的可观察对象时，您几乎总是 当组件被销毁时，安排取消订阅

有一些例外的观测结果是不必要的。 ActivatedRoute观测值属于例外

激活的路由及其可观察对象与路由器隔离 它本身当路由组件不再可用时，路由器将销毁该组件 需要时，注入的激活路由也随之消亡

不管怎样，请随时取消订阅。它是无害的，从来都不是坏事 练习

在订阅组件中的可观察对象时，您几乎总是 当组件被销毁时，安排取消订阅

有一些例外的观测结果是不必要的。 ActivatedRoute观测值属于例外

激活的路由及其可观察对象与路由器隔离 它本身当路由组件不再可用时，路由器将销毁该组件 需要时，注入的激活路由也随之消亡

不管怎样，请随时取消订阅。它是无害的，从来都不是坏事 练习

因此，不要取消订阅

route.params.subscribe

。这会解决你的问题

---

有关更多详细信息：

@ishandutta2007我使用可能的修复程序更新了插件。请尝试一下firebaseui-angular@2.5.0

没有帮助。如果您查看桩跟踪，它与此订阅无关，但FirebaseUIComponent的订阅是库的一部分，我无法访问

firebase ui

组件的

子选项

变量。@günter-zöchbauer您对此有何想法，我检查了您类似的答案@ishandutta2007，请阅读更新的答案，你会明白的。@ishandutta2007，有可能为此创建plnkr或stackbliz吗？不太习惯创建具有外部依赖性的复杂plunkr。面临的问题很少。这是最新的atempt