Angular 在另一个模板中丢失 ViewChild 模板答案

【问题标题】：Angular lose ViewChild template inside another oneAngular 在另一个模板中丢失 ViewChild 模板
【发布时间】：2021-01-27 12:37:02
【问题描述】：

我试图将我的裁剪器元素 (angular-cropperjs) 放在我的引导模式中。但是当我的裁剪器块在模态之外时我仍然可以读取我的裁剪器元素console.log(this.angularCropper) 的问题，但是当我放入模态块时它给了我undefined。我猜它与ViewChild() 有关，但不明白我到底应该怎么做。
componenet.ts

import { Component, OnInit, ViewChild, TemplateRef, ElementRef } from '@angular/core';
import { CropperComponent } from 'angular-cropperjs'
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
  selector: 'app-cropper',
  templateUrl: './cropper.component.html',
  styleUrls: ['./cropper.component.scss']
})
export class CustomCropperComponent implements OnInit {
  @ViewChild('modal') modal: ElementRef;
  @ViewChild('angularCropper') angularCropper: CropperComponent;

  modalRef: BsModalRef;

  public imageUrl: string = '';
  public croppedResult: string = '';

  constructor(private modalService: BsModalService) { }

  ngOnInit(): void {
  }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { id: 2, class: 'modal-dialog-centered' });
  }

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = () => {
        this.imageUrl = reader.result as string;
      }
    }
  }

  getCroppedImage() {
    console.log(this.angularCropper) // see only outside block, inside modal returns undefined
    this.angularCropper.cropper.getCroppedCanvas().toBlob((blob) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {
        this.croppedResult = reader.result as string;
      }
    }, 'image/jpeg', 0.95)
    console.log(this.croppedResult)
  }

}

component.html

<div class="image__upload" (click)="openModal(modal)">
    <div class="image__upload-text">
        <img src="assets/img/vector.png" alt="">
        <p class="image__upload-text-header">Add Photo</p>
        <p class="image__upload-text-description">(size is less than 1mb)</p>
    </div>
    <!-- <input id="file-input" type="file" (change)="choosePhoto($event.target.files)" /> -->
</div>

<ng-template #modal>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Modal</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">
<!-- Not Available to read  -->
<img src="{{croppedResult}}" alt="">
<input type="file" (change)="onSelectFile($event)" />
<angular-cropper #angularCropper [imageUrl]="imageUrl"></angular-cropper>
<button (click)="getCroppedImage()">Crop</button>

    </div>
</ng-template>

<!-- Available to read -->
<img src="{{croppedResult}}" alt="">
<input type="file" (change)="onSelectFile($event)" />
<angular-cropper #angularCropper [imageUrl]="imageUrl"></angular-cropper>
<button (click)="getCroppedImage()">Crop</button>

【问题讨论】：

标签： angular

【解决方案1】：

问题是 ViewChild 在 ng-template 中不起作用，所以我删除了 ng-template 并从另一个组件打开模式，参考解决方案 link

【讨论】：