字体尺寸使用Angular 7通过按钮增加

Question

尝试进行Angular App的整个页面的增量和减小字体大小。搜索功能以角度但找不到任何解决方案，任何人都可以告诉我如何使用以下功能

$(document).ready(function(){        
       var originalSize = $('div').css('font-size');         
      // reset        
       $(".resetMe").click(function(){           
      $('div').css('font-size', originalSize);         
       });
       // Increase Font Size          
       $(".increase").click(function(){         
      var currentSize = $('div').css('font-size');         
      var currentSize = parseFloat(currentSize)*1.2;          
      $('div').css('font-size', currentSize);         
      return false;          
      });        
       // Decrease Font Size       
       $(".decrease").click(function(){        
       var currentFontSize = $('div').css('font-size');        
       var currentSize = $('div').css('font-size');        
       var currentSize = parseFloat(currentSize)*0.8;        
       $('div').css('font-size', currentSize);         
       return false;         
       });         
     });

可以告诉我如何在Angular 7

上添加它

<input type="button" class="increase" value=" + ">
      <input type="button" class="decrease" value=" - "/>
      <input type="button" class="resetMe" value=" = ">

Answer 1

您应该尽可能地在角度使用jQuery 。这样做有一种角度的方式。

您可以使用ViewChild访问HTML内容。然后，您可以访问nativeElement上的style属性。此样式属性为CSSStyleDeclaration类型，并在其上具有所有CSS样式属性。只需从那里更改它。

在这里，尝试一下：

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fontSize = 14;
  @ViewChild('para', { static: true }) para: ElementRef;
  changeFont(operator) {
    operator === '+' ? this.fontSize++ : this.fontSize--;
    (this.para.nativeElement as HTMLParagraphElement).style.fontSize = `${this.fontSize}px`;
  }
}

和模板中：

<p #para>
  Start editing to see some magic happen :)
</p>
<button (click)="changeFont('+')">+</button>
<button (click)="changeFont('-')">-</button>

---

这是工作示例stackblitz 您的参考

Answer 2

也许您应该选择一个完整的角度解决方案，而无需jQuery，这实际上对这种事情是没有用的。

无论如何，这是组件代码

const DEFAULT_FONT_SIZE = 16;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fontSize: number;
  constructor(){
    this.fontSize = DEFAULT_FONT_SIZE;
  }
  decrease(){
    this.fontSize = (this.fontSize * 0.8);
  }
  increase(){
    this.fontSize = (this.fontSize * 1.2);
  }
  reset(){
    this.fontSize = DEFAULT_FONT_SIZE;
  }
}

您可以看到我设置了一个DEFAULT_FONT_SIZE，对重置部分有用，并且由于此html

，我没有修改CSS

<p [style.fontSize.px]="fontSize">
  Start editing to see some magic happen :)
</p>
<button type="button" (click)="increase()">
  Increase
</button>
<button type="button" (click)="decrease()">
  Decrease
</button>
<button type="button" (click)="reset()">
  Reset
</button>

您可以看到字体尺寸被束缚在 px值上的样式(您可以使用您喜欢的格式(

所以它就是这样的：

<p [style.fontSize.px]="fontSize">
  Start editing to see some magic happen :)
</p>

检查一下
https://stackblitz.com/edit/angular-mqj9et

Answer 3

您可以使用 Angular内置属性指令[ngStyle] 执行技巧。

[ngStyle]用于基于表达式添加/删除CSS样式属性。

在您的组件中。根据按钮点击增加/降低值；

根据按钮单击增加/降低fontSize变量；

fontSize = 14;
changeFontSize(isIncrement) {
  fontSize = (isIncrement) ? fontSize++ : fontSize--;
}

在您的组件HTML中，[ngStyle]接受对象为具有键值对的输入值，密钥是CSS属性名称，而值是属性值。

<p [ngStyle]={'fontSize': fontSize + 'px'}>
  Hello, font size test.
</p>
<button (click)="changeFontSize(true)">Increase</button>
<button (click)="changeFontSize(false)">Decrease</button>