Как добавить пользовательскую директиву к компоненту Angular Material Dialog - PullRequest
Новая
       6

Как добавить пользовательскую директиву к компоненту Angular Material Dialog

0 голосов
/ 23 марта 2020

Я создал пользовательскую директиву, которая добавляет дополнительное событие @Output() к элементу ion-range Ioni c. Он хорошо работает на обычных страницах, но когда я пытаюсь использовать его в компоненте Angular Material Dialog, пользовательское событие по какой-то причине не запускается. Мои пользовательские директивы добавляются в модуль Directives, и я обычно импортирую этот модуль Directives туда, где мне нужно его использовать. Вот как настроен мой проект:

range-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();
    }

}

Эта директива объявлена ​​и экспортирована здесь:

directives.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.

В этом диалоговом окне есть элемент ion-range с событием @Output(), I ' мы добавили в `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 на мою страницу, где используется всплывающее окно.

Это причина, по которой он не регистрируется, потому что Dialog isn ' присутствует на странице при загрузке страницы? Поэтому, когда я запускаю диалог, директива не применяется?

Как использовать пользовательские директивы с компонентом Angular Material Dialog?

Спасибо!

1 Ответ

0 голосов
/ 23 марта 2020

Интересно, что когда я изменил свой селектор с: 

@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>

It сработало ... кто-нибудь знает, почему я не могу позвонить с помощью селектора HTML, как я сделал в своем первоначальном вопросе? Потому что вызов селектором ion-range работал на не диалоговых компонентах. Спасибо!

...