如何向 Angular Material Dialog 组件添加自定义指令

Question

我创建了一个自定义指令，为 Ionic 的ion-range元素添加了一个额外的@Output()事件。 它在普通页面上运行良好，但是当我尝试在 Angular Material 的Dialog组件中使用它时，自定义事件由于某种原因没有触发。 我的自定义指令被添加到 Directives 模块中，我通常会在需要使用它的地方导入这个 Directives 模块。 这是我的项目的设置方式：

范围-events.directive.ts

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: 'ion-range'
})
export class RangeEventsDirective {

    @Output() public ionStart: EventEmitter<RangeValue> = new EventEmitter();

    public constructor(protected elemRef: ElementRef<IonRange>) {}

    @HostListener('mousedown', ['$event'])
    @HostListener('touchstart', ['$event'])
    public onStart(ev: Event): void {
        this.ionStart.emit(this.elemRef.nativeElement.value);
        ev.preventDefault();
    }

}

该指令在此处声明和导出：

指令.module.ts

@NgModule({
  declarations: [
    ...
    RangeEventsDirective,
    ...
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ...
    RangeEventsDirective,
    ...
  ]
})
export class DirectivesModule { }

我定义了一个自定义弹出组件，它在悬停时显示，带有一个编辑按钮。 单击此编辑按钮时，它会创建我的 Dialog 组件。

这是我的弹出组件：

edit-kit-popup.component.ts

@Component({
  selector: 'app-edit-kit-popup',
  templateUrl: './edit-kit-popup.component.html',
  styleUrls: ['./edit-kit-popup.component.scss'],
})
export class EditKitPopupComponent implements OnInit {

  constructor(
    private dialog: MatDialog,
  ) { }

  ngOnInit() {}

  edit() {
    const modalRef = this.dialog.open(EditKitSectionModalComponent, {
      width: '320px',
      height: '476px',
      position: {
        top: '20px',
        right: '20px'
      },
      data: {
        ...
      }
    });
  }

}

如您所见，我使用自定义组件来显示对话框，该组件定义在： edit-kit-section-modal.component.ts 。

这个对话框有一个带有@Output()事件的ion-range元素，我在 `edit-kit-section-modal.component.html 中添加了：

<ion-range #sectionHeightRange (ionStart)="customRangeStart($event)"></ion-range>

这两个组件都在以下模块文件中定义和导出。 然后我在这里导入我的DirectivesModule以便我可以在组件中使用指令：

press-kit-components.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    MaterialModule,
    PipesModule,
    IonicModule,
    ...
    DirectivesModule
  ],
  declarations: [
    ...
    EditKitItemPopupComponent,
    EditKitSectionModalComponent
  ],
  exports: [
    ...
    EditKitItemPopupComponent,
    EditKitSectionModalComponent,
  ]
})
export class PressKitComponentsModule { }

由于我使用的是自定义组件，因此我确保在使用弹出窗口的页面中添加EditKitSectionModalComponent作为entryComponent 。

是因为页面加载时页面上不存在对话框而未注册的原因吗？ 那么当我触发对话框时，指令没有被应用？

我应该如何将自定义指令与 Angular Material Dialog 组件一起使用？

谢谢！

Answer 1

有趣的是，当我从以下位置更改选择器时：

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: 'ion-range'
})

到：

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: '[ion-range-events]'
})

并添加了这样的指令：

<ion-range ion-range-events #sectionHeightRange (ionStart)="customRangeStart($event)"></ion-range>

它起作用了……有人知道为什么我不能像在原始问题中那样通过 HTML 选择器调用吗？ 因为通过选择器ion-range调用适用于非对话框组件。 谢谢！