如何从另一个组件访问 NgbdModalContent 的属性？

Question

假设我有一个组件，其模板包含一个按钮Edit，当用户单击该组件时，我想将另一个组件加载为模态模板（动态模态模板）。 这是我的组件ProfilePictureModalComponent，其中包含Edit 按钮：

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {AddProfilePictureComponent} from "./add-profile-picture.component";
import {Http} from "@angular/http";
import {AlertService} from "../../../alerts/alert.service";
import {ActivatedRoute} from "@angular/router";
import {CropperSettings} from "ng2-img-cropper";
import {SharedModalService} from "../shared-modal.service";
import {EditProfilePictureComponent} from "./edit-profile-picture.component";

@Component({
  selector: 'profile-picture-modal-component',
  templateUrl: 'profile-picture-modal.template.html',
  styleUrls: ['profile-picture.css'],
  providers: [SharedModalService]
})
export class ProfilePictureModalComponent implements OnInit {
  @Input() isLoggedInUser;
  // userProfilePic: any;
  // profileImageSrc;
  user_id: string;
  mySharedModalService;

  constructor(
    private modalService: NgbModal,
    private http: Http,
    private alertService: AlertService,
    private activeRoute: ActivatedRoute,
    private sharedModalService: SharedModalService) {
  }

  ngOnInit() {
    this.user_id = this.activeRoute.snapshot.params['user_id'];
    this.getProfilePic();
    this.mySharedModalService = this.sharedModalService;
  }

  getProfilePic(): void {
    this.http.get('/api/link/'+this.user_id+'/profilePic')
    .subscribe((res)=>{
      this.sharedModalService.userProfilePic = res.json();
      this.sharedModalService.profileImageSrc = "/api/uploadedFiles/profPics/download/cropped_"+this.sharedModalService.userProfilePic.name;
    }, err => {
      this.alertService.error(err);
    });
 }

 editProfileModal() {
    const modalRef = this.modalService.open(EditProfilePictureComponent, {size: 'lg'});
    modalRef.componentInstance.user_id = this.user_id;
    modalRef.componentInstance.editProfilePicModal = modalRef;
    modalRef.componentInstance.name = 'World';
  }
}

这是profile-picture-modal.template.html:

<div *ngIf="(mySharedModalService.userProfilePic)?.length!=0">
  <span class="prof-img-span">
    <img class="img-responsive profile-pic" [class.img-circle]="true" [src]="mySharedModalService.profileImageSrc" [width]="200" [height]="200">
    <button class="prof-img-edit-btn btn btn-default" (click)="editProfileModal();" *ngIf="isLoggedInUser">{{ 'profile.edit' | translate }}</button>
  </span>
</div>

当点击编辑按钮时，这个组件加载另一个组件（EditProfilePictureComponent）为NgbdModalContent，下面是EditProfilePictureComponent：

import {Component, OnInit, ViewChild, Input, AfterViewInit} from '@angular/core';
import { User } from "../../user";
import { ActivatedRoute } from "@angular/router";
import { Http } from '@angular/http';
import { ImageCropperComponent, CropperSettings, Bounds } from 'ng2-img-cropper';
import { AlertService } from '../../../alerts/alert.service';
import { FileUploader } from 'ng2-file-upload';
import {ProfilePicInfo} from "./ProfilePicInfo";
import {ProfilePictureService} from "./profile-picture.service";
import {TranslateService} from "ng2-translate/index";
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
import {SharedModalService} from "../shared-modal.service";

const URL = '/api/uploadedFiles/profPics/upload';

@Component({
  selector: 'edit-profile-picture',
  templateUrl: 'edit-profile-picture.template.html',
  styleUrls: ['../profile.component.css'],
  providers: [SharedModalService]
})
export class EditProfilePictureComponent implements OnInit, AfterViewInit {
  user: User = new User();
  // user_id: string;
  @Input() isLoggedInUser;
  public profileUploader:FileUploader = new FileUploader({url: URL});

  //cropper
  name: string;
  data1: any;
  cropperSettings: CropperSettings;
  @ViewChild('editCropper', undefined) editCropper: ImageCropperComponent;
  userProfilePic: any;
  croppedLeft=0; croppedRight =0; croppedTop=0; croppedBottom=0; croppedHeight=0; croppedWidth=0;
  // profileImageSrc;
  @Input() user_id;
  @Input() editProfilePicModal;

  constructor(private http: Http,
    private alertService: AlertService,
    private profilePicService: ProfilePictureService,
    private activeRoute: ActivatedRoute,
    private translate: TranslateService,
    public activeModal: NgbActiveModal,
    private sharedModalService: SharedModalService
  ) {}

  ngAfterViewInit() {
    this.sharedModalService.editCropper = this.editCropper;
  }

  //cropper
  setRoundedMethod(value: boolean): void {
    this.cropperSettings.rounded = value;
  }


  cropped(bounds: Bounds): void {
    this.croppedLeft = bounds.left;
    this.croppedRight = bounds.right;
    this.croppedTop = bounds.top;
    this.croppedBottom = bounds.bottom;
    this.croppedHeight = bounds.height;
    this.croppedWidth = bounds.width;
  }

  editProfilePic(): void {
    console.log("hello");
    let image: any = new Image();
    image.src = "/api/uploadedFiles/profPics/download/"+this.sharedModalService.userProfilePic.name;
    this.editCropper.setImage(image);
  }
}

我想要做的是当点击Edit按钮并渲染我的模态模板时，我应该设置用户以前的个人资料图片，所以我需要从ProfilePictureModalComponent.editProfileModal()调用EditProfilePictureComponent.editProfilePic()，但是因为两个组件之间没有关系我无法访问EditProfilePictureComponent 的属性，为此我从共享服务中使用，但现在我需要访问它的方法。

Answer 1

将您的ProfilePictureModalComponent 作为父级传递给EditProfilePictureComponent，然后在EditProfilePictureComponent 的ngAfterViewInit 上调用父级方法将editCropper 传递给父级 ProfilePictureModalComponent:

editProfileModal() {
  const modalRef = this.modalService.open(EditProfilePictureComponent, {size: 'lg'});
  modalRef.componentInstance.user_id = this.user_id;
  modalRef.componentInstance.editProfilePicModal = modalRef;
  modalRef.componentInstance.name = 'World';
  modalRef.componentInstance.parent = this;
}

editProfilePic(editCropper): void {
  console.log("hello");
  let image: any = new Image();
  image.src = "/api/uploadedFiles/profPics/download/"+this.sharedModalService.userProfilePic.name;
  editCropper.setImage(image);
}

和EditProfilePictureComponent:

@Input() parent;
......
......
ngAfterViewInit() {
  this.parent.editProfilePic(this.editCropper);
}