canDeactivate in a child component not firing

Help Requests
1

I have a page that consists of a container component (parent) that contains a child component (child).

Each of them has a viewModel, I wanted to use the canDeactivate() hook in the child component to stop the user from leaving the page while he is editing something on the child component. However, the hook does not fire when the URL changes. It only fires when the hook is written in the parent component viewModel.

I’d like to know if its possible to fire the canDeactivate or some other methods to do the same thing but only on the child component viewModel?

Thank you in advance.

1 Like
2

canDeactivate is not a general lifecycle callback on any component.

It’s a lifecycle callback only on route component, means the component loaded by aurelia router,

{
  route: 'some-page',
  moduleId: 'path/to/foo' // This component has canDeactivate callback
  ...
}

So you need to implement canDeactivate on that component loaded by router, if you need to check something in a child component (like isChanged), you can use view-model.ref.

export class ComponentLoadedByRouter {
  canDeactivate() {
    // check this.childVM.isChanged
  }
}

<template>
  <a-child view-model.ref="childVM"></a-child>
</template>
4 Likes
3

Thanks! :heart_eyes:

1 Like