切换图像的宽度和高度答案

【问题标题】：Toggle width & height of image切换图像的宽度和高度
【发布时间】：2018-05-06 03:56:26
【问题描述】：

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>

您好，我正在使用 Angular 2。我正在使用自定义控件设计自己的图像查看器。有一个全屏按钮可用。我想让我的图像在单击该按钮时全屏显示，当我再次单击该按钮时，它应该转到以前的状态，这意味着我想让它切换。我在 Angular 2 中嵌入 jquery。当我点击它时，它会使我的图像全屏显示，但我怎样才能让它切换。

【问题讨论】：

标签： javascript jquery css angular angular2-template

【解决方案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 代码。希望这会有所帮助。

【讨论】：

@lakhanhandelwal 如果这个答案对您有用，您应该将其标记为正确 - 这就是您如何“感谢”Stack Overflow 上花时间帮助您解决任何问题的人。跨度>

【解决方案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)="btnEventToggle(imgToggled)"，但不建议这样做。

【讨论】：