angular - 如何访问模态内插件的视图子项以获取该插件的实例？

Question

在 Angular 7 中，我使用 ngx-cropperjs 插件裁剪图像，但我已将我的插件指令放在我的模态主体中，比如

<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Create Listing</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ngx-cropperjs #angularCropper [cropperOptions]="configCrop" [imageUrl]="imageUrl" (export)="resultImageFun($event)"></ngx-cropperjs>
        <button (click)="CropMe()">CropMe</button>
            <br>
        <img [src]="resultResult" />
    </div>

在我的 ts 中，我使用以下方法打开模态

openModal(template: TemplateRef<any>) {
        this.modalRef = this.modalService.show(template, this.modalConfig);
              }

对于cropper插件，我有一个像这样的viewchild

@ViewChild('angularCropper') public angularCropper: NgxCropperjsComponent;

如果 ngx-cropper 在模态之外，我将直接在 console.log 中获取实例

 console.log("angularCropper", this.angularCropper)

但是由于插件在模态中，我现在变得未定义，我现在如何访问插件的实例？

Answer 1

您可以使用 ng-container 访问内部视图子级。

<ng-template #template>
    <div class="modal-body">
        <angular-cropper #angularCropper [cropperOptions]="config" [imageUrl]="imageUrl"></angular-cropper>
        <img [src]="imgUrl"/>
    </div>
</ng-template>
<ng-container [ngTemplateOutlet]="template"></ng-container>

我已经用它创建了演示。请看一看。

https://stackblitz.com/edit/cropper-js-demo