angular - 查看销毁错误 : Attempt to use a destroyed view: detectChanges in Angular 4

Question

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

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

任何建议都会有所帮助。谢谢! (提前)

Answer 1

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

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

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

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