ViewDestroyedError:尝试使用损坏的视图:Angular 4中的detectChanges [英] ViewDestroyedError: Attempt to use a destroyed view: detectChanges in Angular 4
问题描述
我是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 {}
现在问题出在哪里了.它在此处显示此控制台是问题的屏幕截图.
任何建议都会有所帮助. 谢谢！ (提前)
问题实际上不是重新路由，而是闪断消息.在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消息被告知要在RegisterComponent.html文件中显示，该文件已被重新路由破坏，因此导致Flash消息试图在已破坏的"Register"视图中显示其消息./p>
我目前对此一无所知.看来，一个应用程序只能在一个永久位置中包含Flash消息.您可以使用的一种解决方案是将Flash消息选择器放在app.component中的某个位置.另一种解决方案是从RegisterComponent发出一个通知，该通知将由您希望在其中显示消息的视图组件拾取，并通过模仿诸如flash-message和timeout的div来模拟" flash-message. >
i am new to Angular 4 and trying to build a simple routing but when i am trying to redirect on successful register using this.router.navigate(['./admin/login']); so its throwing this error ViewDestroyedError: Attempt to use a destroyed view: detectChanges in console.log. Here is how my register.component.ts file looks like:
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;
}
});
}
}
And i have created a auth.module.ts file in which i have mentioned the route for these two.
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 { }
Also i have this routing file auth-routing.module.ts here you can view the file:
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 {}
Now where is the problem not getting it. Its showing this Console here is the screenshot of the problem.
Any suggestion will be helpful. Thank you! (in advance)
The problem is actually not the rerouting, but with flash-messages. In your RegisterComponent's html, you have the <flash-messages></flash-messages>; after the user is registered, you 1. call flash-messages, 2. reroute to login page.
this.flash.show("User created successfully!", { cssClass: 'alert-success', timeout: 3000 });
this.router.navigate(['./admin/login']);
The problem is that flash-messages is being told to display in the RegisterComponent.html file, which is destroyed by the reroute, so that results in flash-messages trying to display its message in the destroyed 'Register' view.
I currently don't know of any way around this. It appears that an app can only have flash-messages in one permanent location. One solution you could use is to put your flash-messages selector somewhere in app.component. Another solution would be to emit a notification from RegisterComponent that gets picked up by the view component you wish to display a message in, and sort of 'mock' a flash-message with a div styled like flash-message and a timeout.
这篇关于ViewDestroyedError:尝试使用损坏的视图:Angular 4中的detectChanges的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
