Question

如何定义我的指令以在所有组件中使用它：

my directive.ts：

import { Parent } from '../../_common/Parent';
declare var jQuery: any;

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

export class IcheckDirective implements AfterViewInit {

  constructor(private el: ElementRef, private parentCmp: Parent) {
    jQuery(this.el.nativeElement).iCheck({
      checkboxClass: 'icheckbox_square-aero',
      radioClass: 'iradio_square-aero'
    }).on('ifChecked', function(event) {
      if (jQuery('input').attr('type') === 'radio') {
        parentCmp.selectType(jQuery('input[name="filters.type"]:checked').val());
      }
    });
  }
}

我的Parent.ts

export abstract class Parent {
 }

我的component.ts（使用icheck）

 import { Component, OnInit, ViewContainerRef } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import { Parent } from '../../_common/Parent';

    declare var jQuery: any;

    @Component({
      selector: 'app-folders',
      templateUrl: './folders.component.html',
       providers: [{ provide: Parent, useExisting: AdminEditComponent }]
    })
    export class FoldersComponent implements OnInit, Parent {

         name = 'FoldersComponent ';

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

      ngOnInit() {

      }

      selectType(value: string) {
         console.log(value);
      }
    }

my component.html：

<input type="radio" icheck checked> => here how can I define an event for calling method **selectType** ?

在这里，我们可以看到我在param FoldersComponent中使用组件，所以当我想在其他组件（如AppComponent）中使用此指令（icheck）时，我收到错误.. 我怎么做才能使所有组件全局化.. 注意：在folderComponent中，我定义了当我选择按钮收音机

时调用的方法 selectType

Answer 1

由于Angular模块支持组件/指令/管道封装，因此您需要使用名为shared modules的模式。创建一个模块并将您的指令放入共享模块的声明中，然后将该模块导入到每个具有使用该指令的组件的模块中。以下是共享模块上的documentation。

修改

据我了解，您希望能够在此icheck使用private parentCmp: FoldersComponent指令与任何组件，而不是父组件的硬编码类型。这可以通过以下方式完成：

1）定义将用于父注入的令牌。它可以是这样一个简单的类：

export abstract class Parent { }

2）在组件上定义一个将与icheck一起使用的提供程序：

@Component({ providers: [{ provide: Parent, useExisting: AnyComponent }] }) export class AnyComponent implements Parent { name = 'AnyComponent'; }

3）在icheck：
中使用此令牌
export class IcheckDirective implements AfterViewInit { constructor(private el: ElementRef, @Optional() private parentCmp: Parent) {

这是the plunker

如何在不指定组件类型的情况下将父组件注入共享指令？

1 个答案: