1
私はそのテンプレートにボタンEditが含まれているとします。ユーザーがそれをクリックすると、別のコンポーネントをモーダルテンプレート（動的モーダルテンプレート）としてロードしたいとします。 これはEditボタンが含まれている私のコンポーネントProfilePictureModalComponentです：他のコンポーネントからNgbdModalContentのプロパティにアクセスするには？
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>
編集ボタンをNgbdModalContentとして、このコンポーネントの負荷別のコンポーネント（EditProfilePictureComponent）をクリックし、ベローズが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);
}
}
iwあなたはEditボタンをクリックして私のモーダルテンプレートをレンダリングしたとき、私はユーザの以前のプロフィール画像を設定する必要がありますのでEditProfilePictureComponent.editProfilePic()からProfilePictureModalComponent.editProfileModal()に電話する必要がありますが、2つのコンポーネント間の関係がないため、 EditProfilePictureComponent、それは私が共有サービスから使用していましたが、今ではそのメソッドにアクセスする必要があります。