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

Question

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

我的指令.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);
      }
    }

我的 component.html :

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

在这里，我们可以看到我在参数 FoldersComponent 中使用了该组件，所以当我想在其他组件(如 AppComponent)中使用该指令(icheck)时，我得到了错误..我该怎么做才能让它成为所有组件的全局..注意:在 folderComponent 中，我定义了方法 selectType 在我选择按钮单选时调用

Answer 1

因为 Angular 模块支持组件/指令/管道封装，所以你需要使用一种称为 shared modules 的模式。创建一个模块并将您的指令放入共享模块的声明中，然后将该模块导入到每个包含使用该指令的组件的模块中。这是 documentation在共享模块上。

编辑:

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

1) 定义将用于父注入(inject)的标记。它可以是这样一个简单的类:

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