如何在不使用 Jquery 的情况下将类添加到 DOM 元素 - Angular 6

Question

目前我已经通过引导程序定义了我的组件的以下模板：

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

我想实现当浏览器屏幕缩小到小于 767.98px 时它将问题行居中。

根据我的阅读，这将使用 jquery 完成，但不再推荐。另外我读到理想的是使用“Renderer2”类所以我的查询是：

Renderer2 上的那部分文档将允许我感知屏幕尺寸，因为在某种程度上必须有一种媒体查询来检测屏幕何时小于 767.98px，然后添加我定义的引导程序类我希望关注的 div。

Answer 1

如果您正在寻找专门的角度解决方案：import {&nbsp; Component,&nbsp; OnInit,&nbsp; HostListener,&nbsp; ViewChild,&nbsp; ElementRef,} from "@angular/core";@Component({&nbsp; selector: "app-header",&nbsp; templateUrl: "./header.component.html",&nbsp; styleUrls: ["./header.component.scss"],})export class HeaderComponent implements OnInit {&nbsp; currentWindowWidth: number;&nbsp; isMobile: boolean;&nbsp; @ViewChild("control") control: ElementRef;&nbsp; constructor() {}&nbsp; ngOnInit() {}&nbsp; @HostListener("window:resize", ["$event"])&nbsp; public onResize(window) {&nbsp; &nbsp; this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;&nbsp; &nbsp; this.toggleMobileClasses(this.control.nativeElement, this.isMobile)&nbsp; }&nbsp; @HostListener("window:load", ["$event"])&nbsp; public onLoad(window) {&nbsp; &nbsp; this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;&nbsp; }&nbsp; toggleMobileClasses(targetElement: HTMLElement, isMobile) {&nbsp; &nbsp; isMobile ? targetElement.classList.add('text-center') : targetElement.classList.toggle('text-center');&nbsp; }}HostListener 是这里的关键声明要侦听的 DOM 事件并提供在该事件发生时运行的处理程序方法的装饰器。 Angular HostListener 文档<div #control class="container">&nbsp; <div class="row my-4">&nbsp; &nbsp; <div class="col-md-12 d-flex justify-content-center">&nbsp; &nbsp; &nbsp; <h2> EVALUACIÓN DE {{ curso }} </h2>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-md-9">&nbsp; &nbsp; &nbsp; <h4>Pregunta 1 de 20 </h4>&nbsp; &nbsp; &nbsp; <p>¿Cúal de las siguientes alternativas es correcta? </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-3 d-flex align-items-center" id="icono-reloj">&nbsp; &nbsp; &nbsp; <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; <div class="list-group" ngFor="let alternativa of alternativas">&nbsp; &nbsp; &nbsp; &nbsp; <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;</div>此外，如果您将Angular Universalwindow is not defined用于 SSR，这种方法不会在服务器解析和填充动态 HTML 期间引发任何错误

Answer 2

function windowResizeFunc() {&nbsp; &nbsp; function reportWindowSize() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;let h = window.innerHeight;&nbsp; &nbsp; &nbsp;let w = window.innerWidth;&nbsp; &nbsp; &nbsp; console.log("Current Width: "+ w);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if( w < 600 ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("yourElementId").classList.add("center");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("yourElementId").classList.remove("center");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; window.onresize = reportWindowSize;}windowResizeFunc();#yourElementId {border: 1px solid #5599cc;}.center{&nbsp;&nbsp; text-align: center;}<div id="yourElementId">Some text</div>你可以使用 VanillaJS