Получить ссылку на элемент, вложенный в модал - PullRequest
Новая
       11

Получить ссылку на элемент, вложенный в модал

0 голосов
/ 06 января 2019

Я пытаюсь получить ссылку на элемент, вложенный в модал. Хотя использование @ViewChild работает для модального режима, оно не работает ни для каких вложенных элементов. Например: DatePicker в коде ниже. Рабочая демонстрация здесь: https://stackblitz.com/edit/angular-s8dtmm-8gqgus (2-я консоль для datePicker не определена) 

export class AppComponent {
  @ViewChild('content') modal: ElementRef;
  @ViewChild('dp') datePicker: ElementRef;

  constructor(private modalService: NgbModal) {}

  open() {
    this.modalService.open(this.modal);
    console.log('modal', !!this.modal); // ref to #content
    console.log('dp', this.datePicker); // undefined
  }
}

Шаблон: 

<ng-template #content let-modal>
  <input ngbDatepicker #dp="ngbDatepicker">
  <button class="calendar" (click)="dp.toggle()">Date picker</button>
</ng-template>
<button(click)="open()">Open  modal</button>

1 Ответ

0 голосов
/ 10 января 2019

Если вы можете изменить свой пример так, чтобы модальное содержимое было отдельным компонентом (т.е. основано на этом примере , а не этом ), тогда вы сможете получить доступ к datePicker компонент в методе open(). Я создал launch-modal.component, который определяет кнопку «Открыть» и выводит значение dp при открытии модального окна:

ответно-modal.component.html 

<button class="btn btn-outline-primary" (click)="open()">Open  modal</button>

запуск-modal.component.ts 

import { Component, ElementRef } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal.component';

@Component({
  selector: 'launch-modal-component',
  templateUrl: './launch-modal.component.html'
})
export class LaunchModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(ModalComponent);
    console.log('dp', modalRef.componentInstance.datePicker);
  }
}

Затем я определил modal.component.ts, который определяет модальное содержимое (это основано на app.module.html в вашем вопросе и определяет ViewChild для datePicker):

modal.component.ts 

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'modal-component',
  template: `
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
  <input ngbDatepicker #dp="ngbDatepicker">
  <button class="btn btn-outline-primary calendar" (click)="dp.toggle()" type="button">Date picker</button>
  `
})
export class ModalComponent {

  @ViewChild('dp') datePicker: ElementRef;

  constructor(public activeModal: NgbActiveModal) {}
}

Вывод консоли при открытом модале:

enter image description here

Пожалуйста, смотрите этот Stackblitz для рабочего демо.

...