通過單擊Ionic5的按鈕或洗掉空格，innerHTML可以更改字體大小-有解無憂

當變數包含空格時，我正在試驗如何在 .html 中更改變數的字體大小

at .ts page, the code to remove the whitespace

this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product['description']);

at .html page, i displayed is as

<p id="p" class="p" [innerHtml]="contents"></p>

它作業得很好，但是我有另一個功能，可以在點擊按鈕時動態更改字體大小，[innerHtml] 中的所有內容都不會執行 ChangeFontSize

.html 頁面的示例如下

  <div class="container">
  <div">
  <ion-button (click)="ChangeFontSize('increase')"> A  </ion-button>
  <ion-button (click)="ChangeFontSize('decrease')"> A- </ion-button>
  </div>

  <h1 id="h"> {{product.title}}</h1>

  <p id="p">{{contents}}</p>

  <p id="p" class="p" [innerHtml]="contents"></p>

  </div>

div h1 動態更改 div p 與 {{contents}} 更改動態顯示空白 br> 等和額外的安全值必須使用 [property]=binding 顯示

[innerHtml] 洗掉了空格但無法更改字體大小，

希望任何人都可以啟發我有哪些可能的去除方法

extra Safe value must use [property]=binding  and br><br>&nbsp;&nbsp;&nbsp;&nbsp

或更改 [innerHtml]="contents" 的字體大小

非常感謝您

:bowing_man: :bowing_man: :bowing_man:

uj5u.com熱心網友回復：

在組件 ts

  contents = `This starter project comes with simple tabs-based layout for apps that are
  going to primarily use a Tabbed UI.`;

  fontSize = 10;
  constructor(public navCtrl: NavController) {}

  increase() {
    this.fontSize  ;
  }

  decrease() {
    this.fontSize--;
  }

在模板中：

 <p [style.font-size.px]="fontSize" class="p" [innerHtml]="contents"></p>
  <button type="button" (click)="increase()">Increase</button>
  <button type="button" (click)="decrease()">Decrease</button>

離子演示

uj5u.com熱心網友回復：

希望有幫助。我認為你需要這樣的全域類。

例子

HTML

<div class="body fontSize16"> // Add font class to parent

<div class="container">
   <ion-button (click)="ChangeFontSize('increase')"> A  </ion-button>
   <ion-button (click)="ChangeFontSize('decrease')"> A- </ion-button>
</div>

<h1 id="h"> {{product.title}}</h1>

<p id="p">{{contents}}</p>

<p id="p" class="p" [innerHtml]="contents"></p>

import { Renderer2, RendererFactory2 } from '@angular/core';

private fontsizes = [12, 14, 16, 18];
private fontClass = 'fontSize';
private fontIndex = 0;
private renderer: Renderer2;

ngOnInit(): void {
   // I think you should set defualt fontsize.
}

constructor(rendererFactory: RendererFactory2) {
   this.renderer = rendererFactory.createRenderer(null, null);
}

ChangeFontSize(type) {
   // Add more condition. Example array lenght or defualt value
   if (type === 'increase') {
     this.fontIndex   1;
   } else if (type == 'decrease') {
     // pls add more condition. example check index of array
     this.fontIndex - 1;
   }
   this.removeClass(this.fontClass   this.fontsizes[this.fontIndex ]);
   this.addClass(this.fontClass   this.fontsizes[index]);
   this.fontIndex = index;
}

addClass(className: string) {
   this.renderer.addClass(document.body, className);
}

removeClass(className: string) {
   this.renderer.removeClass(document.body, className);
}

CSS

body.fontSize16 .p{
   font-size: 16px;
}

SASS

body {
     &.fontSize16 {
        .p{ 
          font-size: 16px;
        }
     }
   }

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/310798.html

標籤：javascript html css 打字稿离子框架

上一篇：如果旁邊的單元格為空，則自動清除單元格，0。請幫助我已經在這幾天

下一篇：在這里反應初學者！如何通過FTP啟動React網站？