Javascript 切换宽度&；影像高度

从'@angular/core'导入{Component，OnInit，ElementRef，Input，ViewChild，Output，EventEmitter}；
声明var JQuery:any；
导出类PresentationComponent实现OnInit{
构造函数（public _eleRef:ElementRef，public CommonComponentService:CommonComponentService）{
}
恩戈尼尼特（）{
jQuery（this._eleRef.nativeElement）.find（#全屏）。on（'click'，function（））{
jQuery（'#exampleImage'）.width（jQuery（window.width（））；
jQuery（'#exampleImage'）.height（jQuery（window.height（））；
});
}
}

。滑动控制{
z指数：5；
背景色：#323232；
溢出：隐藏；
边界：0；
填充：0；
宽度：100%；
颜色：#fff；
字体大小：13px；
最大高度：56px；
最小高度：50px；
///文本对齐：居中；
}
.控制{
字体大小：20px；
填充：10px；
光标：指针；
}
.滑动控制#全屏{
浮子：对！很重要；
}
.imageArea{
背景色：#E5；
边框：1px插图#323232；
}
.调整大小{
宽度：100%；
}

{{count+1}}/{{finalCount}
{{'Stepper.Next'| translate}}

这对我很有效，请试试

在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>

---

为了获得屏幕的高度和宽度，您不想使用任何jquery代码。希望这有帮助。

您可以使用[style.height]和[style.width]绑定图像的高度和宽度，而不是jQuery，例如：

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

另一个选项是将图元绑定到角度，并完全处理图元：

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

---

并在单击事件中发送元素：（单击）=“btnEventToggle（imgToggled）”，但不建议这样做。

@lakhankhandelwal如果这个答案对您有效，您应该将其标记为正确-这就是您如何“感谢”堆栈溢出问题的人员，他们花时间帮助您解决了任何问题。

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">