Angular Ionic 2从用户界面控制字体大小

我处于移动应用程序开发和最终用户可以单击+/-符号来增加或减少字体大小的要求之间

我已经使用JQuery/JavaScript为web做了很多次了，但不确定如何在这里管理它

我的post.html

 <ion-header>
    <ion-navbar>
        <button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-buttons>
          <button (click)="fontSizeChange()" class="details_btn  blicon-text-file-font" ion-button icon-only>
          </button>
        </ion-buttons>      
    </ion-navbar>
</ion-header>
<ion-content class="post" *ngIf="post">
    <div class="detail">
        <div class="detail_image">
            <h1>{{post.title.rendered}}</h1>
        </div>
        <div class="page_info">
          <span class="date"><span class="blicon-clock"></span> {{post.date | date: 'mediumDate'}} </span> 
          <span class="tag"> News</span>
        </div>  
        <ion-item *ngIf="authorData && authorData.avatar_urls">
            <ion-avatar item-left>
                <img [src]="authorData.avatar_urls[96]">
            </ion-avatar>
            <h2>{{authorData.name}}</h2>
        </ion-item>
        <div id="fontControl">
            <p padding [innerHtml]="post.content.rendered"></p>
        </div>
    </div>
<!-- detail -->

</ion-content>

请建议

---

提前谢谢

您可以使用

document.getElementById（'mydiv'）

进行此操作

这就是我所做的，它是有效的

假设您有一个这样的div，带有

id

、预先给定的

font size

和一个按钮

+

：

<div id="mydiv" style="font-size: 1px;">This text</div>
<button (click)='clicked()'>+</button>

---

注意：我已经从字符串操作了

px

中的样式。您可以对%em、rem等执行相同的操作。

在父内容上使用

ngStyle

有一种更简单的方法

您的增量按钮、值在

ems

中：

<ion-buttons>
    <button (click)="fontSizeChange(-0.2)" ion-button icon-only>
        <ion-icon name="remove"></ion-icon>
    </button>
    <button (click)="fontSizeChange(0.2)" ion-button icon-only>
        <ion-icon name="add"></ion-icon>
    </button>
</ion-buttons>  

<ion-content [ngStyle]="{'font-size': fontSize+'em' }">
...
</ion-content>

---

请参见操作。

我的内容是

样式是用CSS描述的。我使用了您的代码，但即使尝试为P元素提供内联样式，也没有发生任何事情。您在

console.log（）

中得到了什么。此外，还不清楚字体大小必须增加哪些部分？你能把问题中的所有代码都粘贴上去吗。Html、css和clicked（）函数？将id赋予

标记，然后重试。如果

console.log（）。另外，由于您是通过
[innerHtml]
进行设置，因此不确定是否发生了此情况。尝试
{{post.content.rendered}
clicked(){
    var s = document.getElementById('mydiv').style.fontSize;
    var p = s.split('px');
    var z = parseInt(p[0]) + 1;
    document.getElementById('mydiv').style.fontSize = z + "px";
    console.log(document.getElementById('mydiv').style.fontSize);
}

<ion-buttons>
    <button (click)="fontSizeChange(-0.2)" ion-button icon-only>
        <ion-icon name="remove"></ion-icon>
    </button>
    <button (click)="fontSizeChange(0.2)" ion-button icon-only>
        <ion-icon name="add"></ion-icon>
    </button>
</ion-buttons>  

<ion-content [ngStyle]="{'font-size': fontSize+'em' }">
...
</ion-content>

fontSize: number = 1.5; // default font size in `em`

fontSizeChange($val: number){
    this.fontSize +=$val;
}