第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在不使用 Jquery 的情況下將類添加到 DOM 元素 - Angular 6

如何在不使用 Jquery 的情況下將類添加到 DOM 元素 - Angular 6

江戶川亂折騰 2022-12-09 13:57:35
目前我已經(jīng)通過引導程序定義了我的組件的以下模板：<div class="container">  <div class="row my-4">    <div class="col-md-12 d-flex justify-content-center">      <h2> EVALUACIóN DE {{ curso }} </h2>    </div>  </div>  <div class="row">    <div class="col-md-9">      <h4>Pregunta 1 de 20 </h4>      <p>?Cúal de las siguientes alternativas es correcta? </p>    </div>    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>    </div>  </div>  <div class="row">    <div class="col-md-12">      <div class="list-group" ngFor="let alternativa of alternativas">        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>      </div>    </div>  </div> </div>我想實現(xiàn)當瀏覽器屏幕縮小到小于 767.98px 時它將問題行居中。根據(jù)我的閱讀，這將使用 jquery 完成，但不再推薦。另外我讀到理想的是使用“Renderer2”類所以我的查詢是：Renderer2 上的那部分文檔將允許我感知屏幕尺寸，因為在某種程度上必須有一種媒體查詢來檢測屏幕何時小于 767.98px，然后添加我定義的引導程序類我希望關(guān)注的 div。
查看完整描述

2 回答

?
搖曳的薔薇

TA貢獻1793條經(jīng)驗 獲得超6個贊

如果您正在尋找專門的角度解決方案：


import {

  Component,

  OnInit,

  HostListener,

  ViewChild,

  ElementRef,

} from "@angular/core";


@Component({

  selector: "app-header",

  templateUrl: "./header.component.html",

  styleUrls: ["./header.component.scss"],

})

export class HeaderComponent implements OnInit {

  currentWindowWidth: number;

  isMobile: boolean;


  @ViewChild("control") control: ElementRef;


  constructor() {}


  ngOnInit() {}


  @HostListener("window:resize", ["$event"])

  public onResize(window) {

    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;

    this.toggleMobileClasses(this.control.nativeElement, this.isMobile)

  }


  @HostListener("window:load", ["$event"])

  public onLoad(window) {

    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;

  }


  toggleMobileClasses(targetElement: HTMLElement, isMobile) {

    isMobile ? targetElement.classList.add('text-center') : targetElement.classList.toggle('text-center');

  }


}


HostListener 是這里的關(guān)鍵


聲明要偵聽的 DOM 事件并提供在該事件發(fā)生時運行的處理程序方法的裝飾器。 Angular HostListener 文檔


<div #control class="container">


  <div class="row my-4">

    <div class="col-md-12 d-flex justify-content-center">

      <h2> EVALUACIóN DE {{ curso }} </h2>

    </div>

  </div>


  <div class="row">

    <div class="col-md-9">

      <h4>Pregunta 1 de 20 </h4>

      <p>?Cúal de las siguientes alternativas es correcta? </p>

    </div>

    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">

      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>

    </div>

  </div>


  <div class="row">

    <div class="col-md-12">

      <div class="list-group" ngFor="let alternativa of alternativas">

        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>

      </div>

    </div>

  </div> 

</div>

此外，如果您將Angular Universalwindow is not defined用于 SSR，這種方法不會在服務器解析和填充動態(tài) HTML 期間引發(fā)任何錯誤


查看完整回答
反對 回復 2022-12-09
?
白衣染霜花

TA貢獻1796條經(jīng)驗 獲得超10個贊

function windowResizeFunc() {


    function reportWindowSize() {

    

     let h = window.innerHeight;

     let w = window.innerWidth;


      console.log("Current Width: "+ w);

      

         if( w < 600 ) {

         document.getElementById("yourElementId").classList.add("center");

         } else {

                  document.getElementById("yourElementId").classList.remove("center");

         }

    }

      

    window.onresize = reportWindowSize;

}



windowResizeFunc();

#yourElementId {

border: 1px solid #5599cc;

}

.center{ 

  text-align: center;

}

<div id="yourElementId">Some text</div>

你可以使用 VanillaJS



查看完整回答
反對 回復 2022-12-09
  • 2 回答
  • 0 關(guān)注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號