来自 UI 的 Ionic 2 控件字体大小

Question

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

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

我的帖子.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>

我的页面.component.ts是：-

import { Component, ViewChild } from '@angular/core';
import { Content, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
@Component({
selector: 'post-detail',
templateUrl: './wordpress-post.html'
})
export class WordpressPost {
@ViewChild(Content) content: Content;
post: any;
authorData: any;
comments = [];
favoritePosts: any;
user: any;
constructor(
private navParams: NavParams,
private loadingController: LoadingController,
private toastController: ToastController,
private storage: Storage
) {
if (navParams.get('post')) {
this.post = navParams.get('post');
}
}
}
fontSizeChange(){
var s = document.getElementById('fontControl').style.fontSize;
console.log(s);
var p = s.split('px');
var z = parseInt(p[0]) + 1;
document.getElementById('fontControl').style.fontSize = z + "px";
console.log(document.getElementById('fontControl').style.fontSize);
}
}

请指教。

提前谢谢。

Answer 1

有一种更简单的方法，即对父内容使用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>

方法：

fontSize: number = 1.5; // default font size in `em`
fontSizeChange($val: number){
this.fontSize +=$val;
}

查看 Plunker 的实际应用。

Answer 2

您可以使用document.getElementById('mydiv')。

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

假设你有一个这样的div - 带有id，预先给定的font-size和一个按钮+：

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

现在，点击：

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);
}

注意：我已经从字符串中px操纵了样式。您可以对%em，rem等执行相同的操作。