在指令中调用组件的方法

Question

我定义了一个指令iCheck，我想在单击单选按钮时调用组件中的方法... 我的指令： 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");
  }
..}

我的html文件 folder.component.html 我在输入中使用我的指令

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

那么如何调用方法＆＃34; selectType（）＆＃34;当我点击一个单选按钮？

Answer 1

有两种方法可以做到这一点：

1. 注入父组件实例并直接在其上调用方法
2. 定义指令的输出事件，并从父组件绑定到它。

注入父组件

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');
      }
    })

使用输出事件

定义IcheckDirective的输出，然后从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');
      }
    })
  }

然后在模板中：

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

Answer 2

你可以在指令中创建EventEmitter，每当你发出它时调用组件函数：

@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 {

   }
}

和html：

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

如果您只想在无线电状态更改时调用函数，只需在组件中使用jQuery就不需要指令

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");
  }
}

Answer 3

  单击单选按钮时

“selectType（）”

绑定到输入上的click事件。

更多

关于该主题的Angular文档：https://angular.io/guide/user-input