自 Parent Angular 2 以来访问特定组件的方法

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') {
  // 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 class 并添加属性:

export abstract class Parent {
    selectType() {}
 }

如果有些家长不会，那么你可以像这样指定类型any，编译器不会产生错误：

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

自 Parent Angular 2 以来访问特定组件的方法

Acces to method of specific Component since Parent Angular 2

angular

directive