获取对嵌套在模态中的元素的引用

Question

我正在尝试获取对嵌套在模式中的元素的引用。虽然使用 @ViewChild 适用于模态，但它不适用于任何嵌套元素。例如：下面代码中的 datePicker。此处的工作演示：https://stackblitz.com/edit/angular-s8dtmm-8gqgus（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>

Answer 1

如果您可以修改您的示例，使模态内容成为一个单独的组件（即基于 this example rather than this one），那么您应该能够访问 [=14= 中的 datePicker 组件] 方法。我创建了一个 launch-modal.component，它定义了 "Open" 按钮，并在模式打开时注销了 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，并为 datePicker 定义了一个 ViewChild）：

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) {}
}

模式打开时控制台的输出是：

请参阅 this Stackblitz 的工作演示。

获取对嵌套在模态中的元素的引用

Get a reference to a element nested inside a modal

ng-bootstrap