Question

就像facebook一样，当您想要更改个人资料图片时，单击更改按钮，然后会出现一个模态，之后您可以上传新图像或编辑旧图像。我正在使用ng-bootstrap模态和ng2-img-cropper，当您单击编辑个人资料图片按钮时，将使用模板参考打开模态。在该模板ref中，有另一个模板引用“#cropper”指向图像裁剪器组件。

image cropper模块具有内置函数“setImage”来设置裁剪器的图像。在打开模态之前，我知道cropper ref将是未定义的，因为模态还没有打印在体内。现在，当我搜索这个案例时，我找到了一种方法，可以在使用视图子设置器打开模态后获取该cropper元素，这样视图子项将在视图中可用该模板时重试设置裁剪器。

这是我的打字稿代码：

  @ViewChild('cropper') set cropper(cropper:ImageCropperComponent) {
      //cropper.setImage(this.ImageHtmlElement);
      console.log(cropper);// prints : undefined
  }

这是我的HTML模板：

<template #profilpicmodal let-c="close" let-d="dismiss" ngbModalContainer>
	<div class="profile-cover-modal">
		<div class="modal-header">
			<div class="close-form ml-auto">
				<button type="button" class="close ml-auto" aria-label="Close" (click)="d('Cross click')">
			<span aria-hidden="true">&times;</span>
		</button>
			</div>
			<span class="info your-photo-tab">
			<p>DID YOU KNOW?</p>
			<p>You can also add images from your phone</p>
		</span>
		</div>
		<div class="modal-tabs">
			<ul class="list-unstyled">
				<li class="upload" (click)="PhotoModalTab = 'upload'"><a class="btn btn-transparent" [ngClass]="{'active':PhotoModalTab == 'upload'}">Upload</a></li>
				<li class="your-photos" (click)="PhotoModalTab = 'filemanager'"><a class="btn btn-transparent" [ngClass]="{'active':PhotoModalTab == 'filemanager'}">Your Photos</a></li>
			</ul>
		</div>
		<div class="modal-body">
			<div [hidden]="PhotoModalTab != 'upload'" ng2FileDrop class="upload-tab" (ng2FileDropFileAccepted)="dragFileAccepted($event,cropper)">
				<!--<img *ngIf="!ProfilePicData.original" src="./assets/images/Drag_Drop.png" alt="">-->
				<img-cropper #cropper [image]="ProfilePicData" [settings]="ProfilecropperSettings"></img-cropper><br>

				<div *ngIf="!ProfilePicData.original">
					<p class="drag-photo">Drag a Photo Here</p>
					<p class="drag-or">or</p>
				</div>
				<a class="btn btn-load-more" (click)="fileinput.click()">
				Upload
				<input #fileinput type="file" (change)="fileChangeListener($event.target.files[0],cropper)" id="upload" style="display:none;" />
			</a>
				<p class="drag-or mt-4 mb-0">For best results image should be at minimum 300px in height or width.</p>
			</div>
			<app-file-browser *ngIf="PhotoModalTab == 'filemanager'" (emitter)="SelectFileAndSave(closebtn,$event)"></app-file-browser>
		</div>
		<div class="modal-footer">
			<div class="buttons-section">
				<button #closebtn type="button" class="btn btn-load-more" (click)="c('Close click')">Close</button>
				<button type="button" class="btn btn-load-more" *ngIf="PhotoModalTab == 'upload'" (click)="SaveImage(closebtn,ProfilePicData,'profile')">Save</button>
			</div>
		</div>
	</div>
</template>

此时我得到了一个非常奇怪的情况，每当我尝试在视图子设置器中记录剪切器时，我总是未定义并且应用程序崩溃，因为裁剪器没有名为setImage的函数。应用程序实际检测到元素，因为它再次触发setter并在浏览器控制台上打开console.log，当我打开模态但我不知道为什么裁剪器未定义

我也试过ViewChidren，遗憾的是没有运气。

抱歉英文不好

ViewChild setter未在ng-bootstrap模式中检测模板ref

0 个答案: