Как получить доступ к дочернему представлению плагина внутри модального, чтобы получить экземпляр этого плагина?

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 для доступа к внутреннему 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