Calling a function from another class issue Angular

Question

When a function is called on a another page; it's parameter "this" is the same as it's parameter "this" on the preceding page.

Function called from CheckAuthorizationOnClickDirective page;

  export class CheckAuthorizationOnClickDirective {
            user: Observable<User>;
            @Input() allowedClaim: any;
            @Input() checkAuthOnClick = () => { };
            observer: MutationObserver;

            constructor(private element: ElementRef,
                private store: Store<fromRoot.State>) {
                this.element = element.nativeElement;
            }

            @HostListener('click', ['$event, $event.target'])
            onClick(event, targetElement) {       
                if (!this.checkAuth()) {
                    this.checkAuthOnClick()   //calling loadForm function
                }
            }
           ...

Function in InvoiceDesignListPage;

 loadForm() {
        this.router.navigate(['/ayarlar/fatura-gorsel/duzenle', this.selectedInvoiceDesign.Id]);
      }

but "this" key value is CheckAuthorizationOnClickDirective so takes an exception.