使用组件与指令

Question

我使用JQuery Library（iCheck）作为我的html组件..所以当我使用一个组件时，在我的html组件中注入它，它的工作正常..就像我的代码

ww.component.ts

import { ViewChild, ElementRef, AfterViewInit, Component } from '@angular/core';

declare var jQuery: any;

@Component({
  selector: 'my-icheck',
  templateUrl: 'icheck.component.html'
})
export class ICheck implements AfterViewInit {
  @ViewChild('input') input;

  ngAfterViewInit() {
    jQuery(this.input.nativeElement).iCheck({
       checkboxClass: 'icheckbox_square-aero',
       radioClass: 'iradio_square-aero'
    });
  }
}

并在其他组件中使用它：

<my-icheck></my-icheck>

结果：

现在当我使用如下指令时： 我的-directive.ts

import { Directive, ElementRef, HostListener, Input, AfterViewInit, ViewChild } from '@angular/core';

declare var jQuery: any;

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

export class IcheckDirective implements AfterViewInit {
  // @ViewChild('input') input;
   @Input() input;
  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    jQuery(this.input.nativeElement).iCheck({
       checkboxClass: 'icheckbox_square-aero',
       radioClass: 'iradio_square-aero'
    });
}}

并在html组件中使用它： ww.component.html

<label class="radio icheck-inline menu-label">
    <input icheck type="radio" name="aa" value="ANN"> BUTTON RADIO
</label>

icheck 我的选择器名称我的结果不一样：

有些人有问题吗？