使用另一个组件的自定义指令以角度显示/隐藏一个组件

Question

我想使用切换（显示/隐藏）另一个组件的自定义指令以角度创建一个组件。我的指令是 [appDatepicker]，我想将此指令放入任何输入，然后在单击输入时自动显示 datepicker 组件。所以我创建了一个可以像下面这样导出的指令、组件和模块。

datepicker.directive.ts

import { Directive, ElementRef, HostListener, Inject } from '@angular/core';
import { DatepickerComponent } from './datepicker.component';

    @Directive({
      selector: '[appDatepicker]',
      
    })
    export class DatepickerDirective {
      constructor(private el: DatepickerComponent) {}
      @HostListener('click', ['$event.target']) onClick(btn) {
      this.el.togglePicker();
      }
    }

datepicker.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'datepicker',
    templateUrl: 'datepicker.component.html',
    styleUrls: ['datepicker.component.scss']
})

export class DatepickerComponent implements OnInit {
   
    isPickerOpen:boolean=false;
    constructor() { }

    ngOnInit() { }

    public togglePicker(){
        this.isPickerOpen = !this.isPickerOpen;
    }
}

datepicker.component.html

<div class="datepicker-container">
    <ng-content></ng-content>
<div class="datepicker" ></div>
<div class="date-picker-date" *ngIf="isPickerOpen">
    this is the datepicker popup
</div>
</div>

datepicker.module.ts

import { NgModule } from '@angular/core';
import { DatepickerComponent } from './datepicker.component';
import { DatepickerDirective } from './datepicker.directive';

@NgModule({
    declarations: [DatepickerDirective],
    imports: [],
    exports: [],
    providers: [],
})
export class DatepickerModule {}

我在主应用程序中像这样使用指令

app.component.html

<input appDatepicker class="datepicker-input"/>

但问题是指令没有调用 this.el.togglePicker() 方法。 el 返回 ElementRef。但似乎它不访问 datepicker 组件方法。谁能帮助我如何从指令中调用方法 togglePicker()。

Answer 1

您需要将您的组件声明为泛型类型，然后在指令中引用它。

    import { Directive, HostListener, Input } from '@angular/core';
    import { DatepickerComponent } from './datepicker.component';
    
    @Directive({
      selector: '[appDatepicker]'
    })
    export class DatepickerDirective<T> {
      @Input('appDatepicker') dtPicker: DatepickerComponent<T>;
      constructor() {}
      @HostListener('click', ['$event']) onClick(event) {
        if (this.dtPicker) {
          this.dtPicker.togglePicker();
          event.stopPropagation();
        }
      }
    }

并更改您的组件

import { Component } from '@angular/core';

@Component({
  selector: 'datepicker',
  templateUrl: './datepicker.component.html'
})
export class DatepickerComponent<T> {
  isPickerOpen: boolean = false;
  constructor() {}

  public togglePicker() {
    console.log('togglePicker');
    this.isPickerOpen = !this.isPickerOpen;
  }
}

你可以在你的组件中使用如下指令

<input [appDatepicker]="dt1" class="datepicker-input"/>
<datepicker #dt1></datepicker>

并在 DatepickerModule 的声明部分添加 datepickercomponent