ViewDestroyedError: Tentative d'utilisation d'un détruits vue: detectChanges
J'ai le composant suivant, qui crée un MdDialog
export class SideNavsComponent implements OnInit, AfterViewInit, OnDestroy {
eventDispatcher: EventDispatcher
authEmailDialogRef: MdDialogRef<AuthEmailDialogComponent>
constructor(public dialog: MdDialog,) {
this.eventDispatcher = new EventDispatcher()
}
signIn( event ): void {
this.isSignedIn = event.checked
this.openDialog()
}
openDialog() {
this.authEmailDialogRef = this.dialog.open( AuthEmailDialogComponent, {
height: '500px',
width: '300px',
disableClose: true
} )
}
ngOnDestroy() {
}
ngAfterViewInit() {
}
ngOnInit() {
event_dispatcher.on( 'CLOSE authEmailDialogRef', ( target: Object ) => {
this.authEmailDialogRef.close()
} )
}
}
Le composant ci-dessous crée un bouton qui lorsqu'il est cliqué ferme la MdDialog créé ci-dessus par l'envoi et l'événement qui est intercepté dans la SideNavsComponent#ngOnInit méthode
export class AuthEmailDialogComponent implements OnInit {
eventDispatcher: EventDispatcher = new EventDispatcher()
}
cancel() {
event_dispatcher.dispatch( 'CLOSE authEmailDialogRef', '')
}
}
La MdDialog est fermé(), mais une détection d'erreur se produit toujours avec les éléments suivants:
ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
at viewDestroyedError (core.es5.js:8636)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12781)
at checkAndUpdateView (core.es5.js:12122)
at callWithDebugContext (core.es5.js:13184)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12724)
at ViewRef_.detectChanges (core.es5.js:10196)
at asterisk.component.ts:37
at ZoneDelegate.webpackJsonp.1467.ZoneDelegate.invokeTask (zone.js:414)
at Object.onInvokeTask (core.es5.js:4119)
at ZoneDelegate.webpackJsonp.1467.ZoneDelegate.invokeTask (zone.js:413)
View_MdDialogContainer_Host_0 @ MdDialogContainer_Host.html:1
proxyClass @ compiler.es5.js:14091
DebugContext_.logError @ core.es5.js:13124
ErrorHandler.handleError @ core.es5.js:1144
next @ core.es5.js:4757
schedulerFn @ core.es5.js:3830
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3816
NgZone.triggerError @ core.es5.js:4188
onHandleError @ core.es5.js:4149
webpackJsonp.1467.ZoneDelegate.handleError @ zone.js:385
webpackJsonp.1467.Zone.runTask @ zone.js:184
ZoneTask.invoke @ zone.js:476
timer @ zone.js:1491
setInterval (async)
scheduleTask @ zone.js:1501
webpackJsonp.1467.ZoneDelegate.scheduleTask @ zone.js:400
onScheduleTask @ zone.js:290
webpackJsonp.1467.ZoneDelegate.scheduleTask @ zone.js:394
webpackJsonp.1467.Zone.scheduleTask @ zone.js:225
webpackJsonp.1467.Zone.scheduleMacroTask @ zone.js:248
(anonymous) @ zone.js:1527
proto.(anonymous function) @ zone.js:1402
AsteriskComponent @ asterisk.component.ts:37
createClass @ core.es5.js:10870
createDirectiveInstance @ core.es5.js:10701
createViewNodes @ core.es5.js:12064
callViewAction @ core.es5.js:12508
execComponentViewsAction @ core.es5.js:12417
createViewNodes @ core.es5.js:12091
createRootView @ core.es5.js:11969
callWithDebugContext @ core.es5.js:13184
debugCreateRootView @ core.es5.js:12644
ComponentFactory_.create @ core.es5.js:9890
ComponentFactoryBoundToModule.create @ core.es5.js:3427
ViewContainerRef_.createComponent @ core.es5.js:10092
PortalHostDirective.attachComponentPortal @ material.es5.js:2135
MdDialogContainer.attachComponentPortal @ material.es5.js:19218
MdDialog._attachDialogContent @ material.es5.js:19486
MdDialog.open @ material.es5.js:19400
webpackJsonp.751.SideNavsComponent.openDialog @ side-navs.component.ts:39
webpackJsonp.751.SideNavsComponent.signIn @ side-navs.component.ts:35
(anonymous) @ SideNavsComponent.html:32
handleEvent @ core.es5.js:11892
callWithDebugContext @ core.es5.js:13184
debugHandleEvent @ core.es5.js:12772
dispatchEvent @ core.es5.js:8792
(anonymous) @ core.es5.js:10720
schedulerFn @ core.es5.js:3842
SafeSubscriber.__tryOrUnsub @ Subscriber.js:236
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3816
ToggleButton.toggle @ togglebutton.js:42
(anonymous) @ ToggleButton.html:4
handleEvent @ core.es5.js:11892
callWithDebugContext @ core.es5.js:13184
debugHandleEvent @ core.es5.js:12772
dispatchEvent @ core.es5.js:8792
(anonymous) @ core.es5.js:9384
(anonymous) @ platform-browser.es5.js:2683
webpackJsonp.1467.ZoneDelegate.invokeTask @ zone.js:414
onInvokeTask @ core.es5.js:4119
webpackJsonp.1467.ZoneDelegate.invokeTask @ zone.js:413
webpackJsonp.1467.Zone.runTask @ zone.js:181
ZoneTask.invoke @ zone.js:476
MdDialogContainer_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
Comment puis-je empêcher le changeDetection de cuisson une fois que le composant est détruit; dans otherwords comment puis-je rendre ce code fonctionne sans erreur?
NB: je l'ai Essayé beaucoup de suggestions sur stackoverflow mais aucune n'a fonctionné.
Grâce
OriginalL'auteur st_clair_clarke | 2017-05-23
Vous devez vous connecter pour publier un commentaire.
La question est la proximité de l'action de la boîte de dialogue de suppression de l'élément de la vue, et votre EventDispatcher n'EST PAS ANGULAIRE de la MÉTHODE donc il tire à l'extérieur de la zone de contexte et les freaks.
Il va comme ceci:
Vous pouvez soit utiliser une autre méthode pour communiquer avec la boîte de dialogue, ou de passer à onPush() pour la détection de changement
Je vous suggérons d'Utiliser le
afterClosed
poignée à la place:J'ai tiré ce morceau de code directement à partir de la documentation: ICI
OriginalL'auteur Dennis Smolek