angular - Anropa en metod på en komponent i en direktiv

Jag definierade en direktiv iCheck och jag vill anropa en metod i en komponent när jag klickar på en radioknapp ... Min direktiv: directive.ts

declare var jQuery: any;

@Directive({
  selector: '[icheck]'
})

export class IcheckDirective implements AfterViewInit {
  constructor(private el: ElementRef) {
    jQuery(this.el.nativeElement).iCheck({
      checkboxClass: 'icheckbox_square-aero',
      radioClass: 'iradio_square-aero'
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {
        // I want to call my method "selectType() of my component.ts ();
      }
    })
  }
  ngAfterViewInit(): void {
    return;
  }
}

folder.component.ts

@Component({
  selector: 'app-folders',
  templateUrl: './folders.component.html',
  styleUrls: ['./folders.component.css']
})
export class FoldersComponent implements OnInit {

constructor(
    private route: ActivatedRoute,
    private router: Router)

   selectType(){ ==> Method that I want to call
    alert();
    console.log("Ici");
  }
..}

Min HTML-fil folder.component.html där jag använder min direktiv i ett input

<input type="radio" icheck name="type" [(ngModel)]="type"value="OUT"> OUT

Så hur kan jag kalla på metoden "selectType()" när jag klickar på en radioknapp?

Svar #1

Det finns två sätt hur du kan göra det:

  1. Injicera föräldrakomponentens instans och kalla på metoden direkt på den
  2. Definiera utdatahändelse för direktivet och bind den till det från föräldrakomponenten.

Injicerar föräldrakomponent

export class IcheckDirective implements AfterViewInit {
  constructor(private el: ElementRef, private parentCmp: FoldersComponent) {
    const self = this;

    jQuery(this.el.nativeElement).iCheck({
        ...
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {

        // I want to call my method "selectType() of my component.ts ();
        this.parentCmp.selectType('value');
      }
    })

Använder utdatahändelse

Definiera utdata för IcheckDirective och binda sedan till den från file.component:

export class IcheckDirective implements AfterViewInit {

  @Output() callParentMethod = new EventEmitter();

  constructor(private el: ElementRef) {
    const self = this;

    jQuery(this.el.nativeElement).iCheck({
       ...
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {

        // I want to call my method "selectType() of my component.ts ();
        self.callParentMethod.next('value');
      }
    })
  }

Och sedan inne i mallen:

<input type="radio" icheck name="type" (callParentMethod)="selectType($event)"  [(ngModel)]="type"value="OUT"> OUT

Svar #2

du kan skapa en EventEmitter i direktivet och varje gång du emitterar den, kalla komponentens funktion:

@Directive({
  selector: '[icheck]'
})

export class IcheckDirective implements AfterViewInit {
   @Output('icheck') callComponentFunction: EventEmitter<any> = new EventEmmiter<any>;

jQuery('#radioBtn').change(function (){
            if (jQuery('#radioBtn').attr("checked")) {
                this.callComponentFunction.emit();
            } else {

            }

   ngAfterViewInit(): void {

   }
}

och html:

<input type="radio" #radioBtn (icheck)="here goes component function you want to call" name="type" [(ngModel)]="type"value="OUT">

om du bara vill anropa en funktion när radioknappens tillstånd ändras, använd bara jQuery i din komponent, det finns inget behov av en direktiv

HTML: <input type="radio" #radioBtn [(ngModel)]="type" value="OUT">

@Component({
  selector: 'app-folders',
  templateUrl: './folders.component.html',
  styleUrls: ['./folders.component.css']
})
export class FoldersComponent implements OnInit {

 constructor(private route: ActivatedRoute, private router: Router) {}

 jQuery('#radioBtn').change(function (){
        if (jQuery('#radioBtn').attr("checked")) {
            this.selectType()
        } else {

        }
 });


  selectType() { ==> Method that I want to call
    alert();
    console.log("Ici");
  }
}

Relaterade artiklar