ViewDestroyedError: попытка использовать разрушенное представление: detectChanges в Angular 4

Я новичок в Angular 4 и пытаюсь построить простую маршрутизацию, но когда я пытаюсь перенаправить успешный регистр, используя this.router.navigate(['./admin/login']);, он выдает эту ошибку ViewDestroyedError: Attempt to use a destroyed view: detectChanges в console.log. Вот как выглядит мой register.component.ts файл:

import { Component, OnDestroy } from '@angular/core';
import { Router } from "@angular/router";
import { ChangeDetectionStrategy } from '@angular/core';

import { FormValidationService } from "../../validations/form-validation.service";
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthService } from '../../services/auth.service';

@Component({
  templateUrl: 'register.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RegisterComponent implements OnDestroy  {
  name: String;
  email: String;
  password: String;
  re_password: String;
  mobile:String;


  constructor(private formValidation: FormValidationService, 
            private flash: FlashMessagesService, 
            private auth: AuthService,
            private router: Router) { }




  registerUser(){   
    var user = {
        name: this.name,
        email: this.email,
        password: this.password,
        re_password: this.re_password,
        mobile:this.mobile,
    }



    if(!this.formValidation.validateEmail(this.email)){
        this.flash.show("Invalid email format!",{ cssClass: 'alert-danger', timeout: 3000 });
        return false;
    }

    this.auth.authRegisterUser(user).subscribe(data => {
      if(data.success){
        this.flash.show("User created successfully!", { cssClass: 'alert-success', timeout: 3000 });
        this.router.navigate(['./admin/login']);     // <-------This is the problem -------------->
      }else{
        this.flash.show(data.message, { cssClass: 'alert-success', timeout: 3000 });
        return false;
      }
    });

  }

}

И я создал auth.module.ts файл, в котором я упомянул маршрут для этих двоих.

import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { FlashMessagesModule } from 'angular2-flash-messages';

import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';
import { AuthService } from '../../services/auth.service';


import { AuthRoutingModule } from './auth-routing.module';

@NgModule({
  imports: [ AuthRoutingModule, FormsModule, FlashMessagesModule ],
  declarations: [
    LoginComponent,
    RegisterComponent
  ],
  providers: [AuthService],
})
export class AuthModule { }

Также у меня есть этот файл маршрутизации auth-routing.module.ts, здесь вы можете просмотреть файл:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Example Pages'
    },
    children: [
      {
        path: 'login',
        component: LoginComponent,
        data: {
          title: 'Login Page'
        }
      },
      {
        path: 'register',
        component: RegisterComponent,
        data: {
          title: 'Register Page'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule {}

Теперь где проблема не получить. Показанная здесь консоль - это снимок экрана с проблемой.

введите здесь описание изображения

Любое предложение будет полезным. Спасибо! (заранее)


person user3201500    schedule 10.07.2017    source источник
comment
Отмените подписку на свои события в функции ngOnDestroy, реализовав интерфейс OnDestroy.   -  person omeralper    schedule 10.07.2017
comment
@omeralper, о каком событии вы здесь говорите? Вы имеете в виду событие клика?   -  person user3201500    schedule 10.07.2017
comment
@Vega у нас есть еще один маршрут, в который мы импортировали этот маршрут.   -  person user3201500    schedule 10.07.2017
comment
@ user3201500 у вас есть только одно событие в RegisterComponent this.auth.authRegisterUser, я полагаю, это вызывает эту ошибку.   -  person omeralper    schedule 10.07.2017
comment
@omeralper как его отключить? Или какое-либо альтернативное решение для того же?   -  person user3201500    schedule 10.07.2017


Ответы (1)


Проблема на самом деле не в перенаправлении, а во флеш-сообщениях. В HTML-коде RegisterComponent у вас есть <flash-messages></flash-messages>; после регистрации пользователя вы 1. вызываете flash-сообщения, 2. перенаправляете на страницу авторизации.

this.flash.show("User created successfully!", { cssClass: 'alert-success', timeout: 3000 });
this.router.navigate(['./admin/login']);

Проблема в том, что флэш-сообщения указываются для отображения в файле RegisterComponent.html, который уничтожается перенаправлением, что приводит к тому, что флэш-сообщения пытаются отобразить свое сообщение в уничтоженном представлении «Регистр».

В настоящее время я не знаю, как это обойтись. Похоже, что приложение может иметь флеш-сообщения только в одном постоянном месте. Одно из решений, которое вы могли бы использовать, - это поместить селектор флеш-сообщений где-нибудь в app.component. Другим решением было бы отправить уведомление от RegisterComponent, которое принимается компонентом представления, в котором вы хотите отображать сообщение, и своего рода «имитировать» флэш-сообщение с помощью div в стиле флэш-сообщения и тайм-аута.

person ObjectiveTC    schedule 21.09.2017