Angular如何通过自定义指令调用datepicker组件实现显隐功能

核心问题原因 #

• 你没有正确渲染DatepickerComponent实例，直接给input绑定指令，不存在可调用togglePicker方法的组件对象
• 指令注入逻辑错误，直接在构造函数声明DatepickerComponent类型无法拿到对应实例，因为指令挂载的input元素上没有注册该组件
• 功能模块未正确声明导出组件和指令，外部模块无法正常使用相关能力

分步修改代码 #

1. 修改 datepicker.directive.ts #

通过@Host()装饰器获取嵌套上下文下的父级DatepickerComponent实例：

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

@Directive({
  selector: '[appDatepicker]',
})
export class DatepickerDirective {
  // 注入父级DatepickerComponent实例，@Optional避免无父组件时报错
  constructor(@Host() @Optional() private datepicker: DatepickerComponent) {}

  @HostListener('click') onClick() {
    if (this.datepicker) {
      this.datepicker.togglePicker();
    }
  }
}

2. 修改 datepicker.module.ts #

补充声明和导出组件、指令：

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

@NgModule({
  // 组件和指令都需要声明
  declarations: [DatepickerComponent, DatepickerDirective],
  // 依赖ngIf需要导入CommonModule
  imports: [CommonModule],
  // 导出组件和指令供外部模块使用
  exports: [DatepickerComponent, DatepickerDirective],
})
export class DatepickerModule {}

注意要导入CommonModule，否则模板中的*ngIf指令无法正常工作

3. 修正 app.component.html 使用方式 #

将input嵌套在datepicker标签内部，对应组件模板的<ng-content>插槽：

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

修改完成后点击input即可正常触发togglePicker方法，控制日期选择器的显隐。

内容的提问来源于stack exchange，提问作者LCB2010