ViewDestroyedError：尝试使用已破坏的视图：Angular 4 中的detectChanges答案

【问题标题】：ViewDestroyedError: Attempt to use a destroyed view: detectChanges in Angular 4ViewDestroyedError：尝试使用已破坏的视图：Angular 4 中的detectChanges
【发布时间】：2017-12-13 18:09:42
【问题描述】：

我是 Angular 4 的新手并尝试构建一个简单的路由，但是当我尝试使用 this.router.navigate(['./admin/login']); 成功注册时重定向，所以它在 console.log 中抛出此错误 ViewDestroyedError: Attempt to use a destroyed view: detectChanges。这是我的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 {}

现在问题出在哪里没有得到它。它在此处显示此控制台是问题的屏幕截图。

任何建议都会有所帮助。谢谢！（提前）

【问题讨论】：

通过实现 OnDestroy 接口取消订阅 ngOnDestroy 函数中的事件。
@omeralper 你在这里谈论什么样的活动？你的意思是点击事件？
@Vega 我们还有一条路线，我们已经在其中导入了这条路线。
@user3201500 你在RegisterComponent this.auth.authRegisterUser中只有一个事件，我想它会导致这个错误。
@omeralper 我该如何禁用它？或者任何替代解决方案？

标签： angular angular-ui-router angular2-routing angular2-forms

【解决方案1】：

问题实际上不是重新路由，而是闪存消息。在您的 RegisterComponent 的 html 中，您有 <flash-messages></flash-messages>;用户注册后，您 1. 调用 flash-messages，2. 重新路由到登录页面。

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

问题是 flash-messages 被告知要显示在 RegisterComponent.html 文件中，该文件已被重新路由破坏，因此导致 flash-messages 试图在已破坏的“Register”视图中显示其消息。

我目前不知道有什么办法可以解决这个问题。似乎一个应用程序只能在一个永久位置有闪信息。您可以使用的一种解决方案是将您的 flash-messages 选择器放在 app.component 中的某个位置。另一种解决方案是从 RegisterComponent 发出一个通知，该通知被您希望在其中显示消息的视图组件拾取，然后“模拟”一个带有类似于 flash-message 和 timeout 样式的 div 的 flash-message。

【讨论】：