angular - 自 Parent Angular 2 起访问特定组件的方法

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') {
  // Here how can I call method **selectType** of the component FolderComponent when I check I radio button 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: FoldersComponent }]
    })
    export class FoldersComponent implements OnInit, Parent {

         name = 'FoldersComponent ';

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

      ngOnInit() {

      }

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

在这里，我们可以看到我在FoldersComponent中有一个方法“selectType”，所以当我想在选中单选按钮时调用它

Answer 1

你可以这样做:

          if (jQuery('input').attr('type') === 'radio') {
             // Here how can I call method **selectType** of the component FolderComponent 
            //when I check I radio button parentCmp.selectType(jQuery('input[name="filters.type"]:checked').val());

             parentCmp.selectType();
          }

如果所有父组件都应具有 selectType 方法，则只需修改 Parent 类并添加该属性即可:

export abstract class Parent {
    selectType() {}
 }

如果有些 parent 不具备它，那么您可以像这样指定类型 any ，编译器不会生成错误:

constructor(private el: ElementRef, @Inject(Parent) private parentCmp:any ) {