Question

尝试对Angle 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;         
       });         
     });

能告诉我如何在角度7上添加它吗？

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

Answer 1

您应该尽可能不要在Angular中使用jQuery 。有一种 Angular方式。

您可以使用ViewChild访问HTML内容。然后，您可以访问style上的nativeElement属性。此样式属性的类型为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>

这是您推荐的Working Sample StackBlitz。

Answer 2

也许您应该寻求一个完整的Angular解决方案，而不需要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;
  }
}

如您所见，由于此HTML，我正在设置DEFAULT_FONT_SIZE，这对重置部分很有用，并且我没有在修改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值上的样式绑定被绑定到Angular（您可以使用喜欢的格式）

所以它变得像这样：

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

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

Answer 3

您可以使用内置的角度属性指令[ngStyle] 来完成操作。

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

在您的component.ts中。声明一个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>

字体大小增加通过使用角度7的按钮减少

3 个答案: