Ошибка типа: невозможно прочитать свойство 'canDeactivate' с нулем в IONI C 5 - PullRequest
Новая
       72

Ошибка типа: невозможно прочитать свойство 'canDeactivate' с нулем в IONI C 5

2 голосов
/ 14 апреля 2020

Я не могу реализовать canDeactivate guard в Ioni c 5. Ниже приведен мой код.

model.ts 

export interface isDeactivatable {
    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
 }

exit-page.guard.ts 

export class LeavePageGuard implements CanDeactivate<isDeactivatable>{
  canDeactivate(
    component: isDeactivatable
  ): Observable<boolean> | Promise<boolean> | boolean {
    console.log('LeavePageGuard');
    return component.canDeactivate();
  }

}

test-page.ts 

export class TestPage implements OnInit, isDeactivatable{
      canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
        console.log('canDeactivate in TestPage');
        return true;
      }
}

home-routing.Module.ts 

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children:[
      {
        path: 'test',
        loadChildren: () => import('../pages/test/test.module').then( m => m.TestPageModule),
        canDeactivate: [LeavePageGuard]
      }
]
}
]

Я получаю следующую ошибку при выходе из TestPage. Я попытался добавить LeavePageGuard в модуль приложения и в модуль TestPage в качестве поставщика, но все еще получаю ту же ошибку. 

core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'canDeactivate' of null
TypeError: Cannot read property 'canDeactivate' of null
    at LeavePageGuard.canDeactivate (leave-page.guard.ts:15)
    at router.js:5543
    at Array.map (<anonymous>)
    at runCanDeactivate (router.js:5532)
    at MergeMapSubscriber.project (router.js:5349)
    at MergeMapSubscriber._tryNext (mergeMap.js:46)
    at MergeMapSubscriber._next (mergeMap.js:36)
    at MergeMapSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at invokeTask (zone-evergreen.js:469)
    at ZoneTask.invoke (zone-evergreen.js:454)

1 Ответ

1 голос
/ 19 апреля 2020

Решение было очень простым, и я нашел его здесь . Проблема была с ленивой загрузкой. Большинство решений дано не для проблемы отложенной загрузки.

Я переместил canDeativate guard из маршрутизации приложения в маршрутизацию модуля этой конкретной страницы. Работает как шарм.

test-rouring.module.ts 

const routes: Routes = [
  {
    path: '',
    component: TestPage
    canDeactivate: [ LeavePageGuard ]
  }
...