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

Question

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

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

我的component.html:

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

在这里，我们可以看到我在参数 FoldersComponent 中使用了该组件，所以当我想在其他组件（如 AppComponent）中使用该指令（icheck）时，出现错误.. 我该怎么做才能让它成为所有组件的全局.. 注意：在 folderComponent 中，我定义了方法 selectType 当我 select 一个按钮收音机

时调用

Answer 1

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

编辑：

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

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

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

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

How to inject a parent component into a shared directive without specifying component type?

angular2-directives

angular