Question

在angular 7 im中，使用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访问内部view-child。

<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

如何访问模态内部插件的视图子对象以获取该插件的实例？

1 个答案: