Question

＆＃13;

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());
     });
     
  }
}

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

你好我正在使用角度2.我设计自己的图像查看器与自定义控件。有一个全屏按钮可用。我想让我的图像在点击该按钮时全屏显示。当我再次点击该按钮时，它应该转到之前的状态意味着我想让它切换。我在角度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;
 }
}

另一个选择是将元素绑定到angular并完全处理元素：

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

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

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

2 个答案: