ViewDestroyedError：尝试使用已损坏的视图：Angular 4中的detectChanges

Question

我是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 {}

现在问题不在哪里。它在这里显示此控制台是问题的屏幕截图。

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

Answer 1

问题实际上不是重新路由，而是使用flash消息。在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消息试图在被破坏的“Register”视图中显示其消息。 / p>

我目前还不知道有什么办法。一个应用程序似乎只能在一个永久位置拥有闪存消息。您可以使用的一个解决方案是将您的flash消息选择器放在app.component中的某个位置。另一个解决方案是从RegisterComponent发出一个通知，该通知由你希望显示消息的视图组件拾取，并且“模拟”一个flash样式的flash消息，如flash-message和timeout。