切換圖像的寬度和高度

Question

 import { Component, OnInit, ElementRef, Input, ViewChild, Output, EventEmitter } from '@angular/core'; declare var JQuery: any; export class PresentationComponent implements OnInit { constructor( public _eleRef : ElementRef,public CommonComponentService:CommonComponentService ) { } ngOnInit() { jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){ jQuery('#exampleImage').width(jQuery(window).width()); jQuery('#exampleImage').height(jQuery(window).height()); }); } } 

 .slide-control { z-index: 5; background-color: #323232; overflow: hidden; border: 0; padding: 0; width: 100%; color: #fff; font-size: 13px; max-height: 56px; min-height: 50px; ///text-align: center; } .control { font-size: 20px; padding: 10px; cursor: pointer; } .slide-control #fullscreen { float: right !important; } .imageArea { background-color: #e5e5e5; border: 1px inset #323232; } .resize { width: 100%; } 

 <div class="row imageArea"> <div class="mx-auto"> <img [src]="newUrl" id="exampleImage" class="img-fluid" alt="Responsive image"> </div> <div class="slide-control form-inline"> <div *ngIf="!buttonShowFlag" class="mx-auto"> <span class="control" (click)="back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></span> <span>{{count+1}} / {{finalCount}}</span> <span class="control" (click)="next()"><i class="fa fa-arrow-right" aria-hidden="true"></i></span> </div> <div class="mx-auto" *ngIf="buttonShowFlag"> <button (click)="cfuModal.show()" class="btn">{{'Stepper.Next' | translate}}</button> </div> <div class="fullscreen float-right"> <span class="control" id="download" *ngIf="download"><a href={{downloadLink}} download><i class="fa fa-download" aria-hidden="true"></i></a></span> <span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span> </div> </div> </div> 

你好，我正在使用angular2。我正在使用自定義控件設計自己的圖像查看器。 有一個全屏按鈕可用。 我要使我的圖像在單擊該按鈕時全屏顯示，當我再次單擊該按鈕時，它應該進入以前的狀態，這意味着我要使其切換。 我在角度2中嵌入jquery。單擊它可使我的圖像全屏顯示，但如何切換。

Answer 1

這對我有用，請嘗試

在您的html中，

<div class="row imageArea">
  <button (click)="toggleMe()">Toggle Me</button>
    <div class="mx-auto">
        <img src="http://gkreading.com/wp-content/uploads/2017/03/awesome-kid-in-the-grass.jpg" id="exampleImage" [ngStyle]="{'width':myWidth,'height':myHeight}"class="img-fluid" alt="Responsive image">
    </div>
</div>

在您的component.ts文件中，

export class AppComponent { 

  private contact:Contacts;
  private myWidth:any = 100+"px";
  private myHeight:any = 100+"px";
  private toggled:boolean = false;

  private toggleMe(){
    if(this.toggled == false ){
      this.myWidth = (window.screen.width) + "px";
      this.myHeight = (window.screen.height) + "px";
    }else{
      this.myWidth = 100 + "px";
      this.myHeight = 100 + "px";
    }
    this.toggled = !this.toggled;
  }
}

為了獲得屏幕的高度和寬度，您不想使用任何jquery代碼。 希望這可以幫助。

Answer 2

可以使用[style.height]和[style.width]作為示例來綁定圖像的高度和寬度，而不是jQuery：

 <img [src]="newUrl" [style.width]="imageWidth" [style.height]="imageHeight" id="exampleImage" class="img-fluid" alt="Responsive image">

並在按鈕事件中切換圖像的大小：

btnEventToggle(){
 this.flagFullScreen = !this.flagFullScreen;
 if(this.flagFullScreen)
 {
   this.imageHeight = (window.screen.height); //or $window.innerHeight
   this.imageWidth = (window.screen.width);
 }
 else{
   this.imageHeight = originalHeight;
   this.imageWidth = originalWidth;
 }
}

另一個選擇是將元素綁定到角度對象，然后完全對待元素：

<img [src]="newUrl" #imgToggled id="exampleImage" class="img-fluid" alt="Responsive image">

並在click事件中發送元素：（click）=“ btnEventToggle（imgToggled）”，但不建議這樣做。