クリックして再度クリックするとエラーになりますか？

Question

コンポーネントの最初のレンダリングではすべてうまく動作しますが、ブラウザの戻るボタンを押してこのコンポーネントを再び呼び出すリンクをクリックすると、ブレークします。

プロファイル-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 { 
} 

プロファイル-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) 

EDIT：

問題があります親コンポーネント内で、I na

バックボタンでもう一度ngOnInit（）がトリガーされていないのに、試行中ですが、このコンポーネントは、他のコンポーネントにfirebase-uiを使用して移動します。もう一度ナビゲートしてngDestroy（）がトリガーされます。

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); 
    } 
} 

Answer 1

説明した条件では、サブスクリプションが初期化されていない可能性があります。定義されていないサブ変数に対してunsubscribeを呼び出しています。サブスクリプションが解除される前にそのサブが存在することを確認する必要があります。たとえば、次のように

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

また、ドキュメントごとに、ActivatedRoute上のサブスクリプションの購読を解除する必要はない、ということは注目に値します。参考：https://angular.io/guide/router#!#route-parameters

When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.

There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.

The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

Feel free to unsubscribe anyway. It is harmless and never a bad practice.

Answer 2

When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.

There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.

The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

Feel free to unsubscribe anyway. It is harmless and never a bad practice.

ので、route.params.subscribeを解除しないでください。これがあなたの問題を解決します。詳細については

：私は可能性の修正でプラグインを更新Please Read

Answer 3

ishandutta2007 @。試してみてくださいfirebaseui-angular@2.5.0