指令中组件的调用方法

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

那么如何在单击单选按钮时调用方法 "selectType()"？

Answer 1

"selectType()" when I click a radio button

绑定到输入上的 click 事件。

更多

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

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

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

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

正在注入父组件

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

指令中组件的调用方法

Call method of a component in directive

typescript

angular2-directives

angular

更多

正在注入父组件

使用输出事件