данные не передаются по маршруту

Question

Я пытаюсь выполнить маршрутизацию от одного компонента к другому компоненту в angular 8. Таким образом, в моем сценарии у меня есть два компонента: компонент истории и соглашение, компонент только для соглашения. Я пытаюсь перейти от компонента истории к соглашению только к компоненту соглашения. Компонент соглашениеreadonly загружается, но не может видеть данные модели, которые я передаю, поскольку они не определены. Я консоль зарегистрировал данные перед навигацией, чтобы убедиться, что они есть, и когда я консоль регистрирую их в соглашении, только они не определены. Может кто-нибудь сказать мне, в чем проблема может быть

Компонент истории соглашения

export class AgreementHistoryComponent implements OnInit {
 agreementsHistoryData: AgreementHistoryModel[];
 agreementsHistory: AgreementHistoryModel[];
 loading: boolean;
 showAgreementReadOnly: boolean;
 @Select(AgreementState.agreement) agreementModalState$: Observable<AgreementsStateModel>;
 public modal: any;


  constructor( public agreementsService: AgreementsService,
               public router: Router,
               private route: ActivatedRoute,
               public modalService: NgbModal) { }

  ngOnInit() {
      this.getAgreementsHistory();
  }

    public agreementClicked(userAgreementId: number) {
       this.getOutstandingAgreements(userAgreementId);
   }

     public getOutstandingAgreements(userAgreementId: number) {
    this.loading = true;
    this.agreementsService
        .getOutstandingAgreements(userAgreementId)
        .subscribe((data: AgreementsModel[]) => {
          if (data.length > 0) {
             this.showAgreementReadOnly = data[0].userAgreementStateId === 3 ? true : false;
             console.log('data is', data);
             if (this.showAgreementReadOnly) {
              this.router.navigate(['agreements-readonly', data], { relativeTo: this.route.parent });
            } else {
              this.agreementsService.store.dispatch(new SetAgreementStatus({ isInteracted: false , data: data }));
              this.loadModalDialog();
             this.loading = false;
            }
          }
        });
    }
}

СоглашениеReadonlyComponent

export class AgreementReadonlyComponent implements OnInit {
  myData: any;
  agreementData: any;
  agreementLength: number;
  loading: boolean;
  model: AgreementsModel;

  constructor( public agreementsService: AgreementsService,
               route: ActivatedRoute,
               private router: Router) {

                this.model = <AgreementsModel>route.snapshot.data['data'];
                console.log(this.model);
               }


  ngOnInit() {}

}

Модуль маршрутизации

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MyAccountComponent } from './my-account.component';
import { SecurityPermissions } from '../../shared/constants/securityPermissions';
import { SectionNames } from '../../shared/constants/sectionNames';
import { AddBankAccountComponent } from './components/add-bank-account/add-bank-account.component';
import { BankAccountComponent } from './components/bank-account/bank-account.component';
import { MyAccountHomeComponent } from './components/my-account-home/my-account-home.component';
import { AccountContactDetailsComponent } from './components/contact-details/contact-details.component';
import { AgreementHistoryComponent } from '../agreements/components/agreement-history/agreement-history.component';
import { AgreementReadonlyComponent } from '../agreements/components/agreement-readonly/agreement-readonly.component';

const routes: Routes = [
  {
    path: '',
    component: MyAccountComponent,
    children: [
      {
        path: '',
        component: MyAccountHomeComponent,
        data: {
          title: 'My account home',
          order: 0,
          sectionName: SectionNames.myAccount,
          baseAddress: 'account'
        }
      },
      {
        path: 'add-bank-account',
        component: AddBankAccountComponent,
        data: {
          title: 'Add a bank account',
          role: [SecurityPermissions.myAccount.CreateBankAccount],
          order: 1,
          sectionName: SectionNames.myAccount,
          baseAddress: 'account'
        }
      },
      {
        path: 'bank-account/:id',
        component: BankAccountComponent,
        data: {
          title: 'My bank account details',
          role: [SecurityPermissions.myAccount.CreateBankAccount, SecurityPermissions.myAccount.ComplianceBankAccountApproval],
          order: 2,
          sectionName: SectionNames.myAccount,
          baseAddress: 'account'
        }
      },
      {
        path: 'contact-details',
        component: AccountContactDetailsComponent,
        data: {
          title: 'My contact details',
          role: [SecurityPermissions.myAccount.CreateBankAccount, SecurityPermissions.myAccount.ComplianceBankAccountApproval],
          order: 2,
          sectionName: SectionNames.myAccount,
          baseAddress: 'account'
        }
      },
      {
        path: 'agreements-history',
        component: AgreementHistoryComponent,
        data: {
          title: 'My agreement details',
          order: 3,
          sectionName: SectionNames.myAccount,
          baseAddress: 'account'
        }
      },
        {
          path: 'agreements-readonly',
          component: AgreementReadonlyComponent,
          data: {
            title: 'My agreement details',
            order: 3,
            sectionName: SectionNames.myAccount,
            baseAddress: 'account'
          }
        }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyAccountRoutingModule { }

Снимок экрана ошибка