javascript - Angular 6-在同一组件的可变更改上动态更改 *ngFor 元素的 css 属性
问题描述
请看下图。我在画布上有 p 标签列表。在画布下方,我有多种颜色和字体大小。
下面是我的场景
- 在画布上添加文本。我可以根据需要添加任意数量。
- 选择任何文本并更改所选 p 标签的颜色和字体大小。
目前我做了以下代码:
1. HTML
<ion-row #canvasRow id="canvasRow">
<ion-col *ngFor="let textarea of textAreasList; let textarea_index= index">
<p absolute-drag style="border: 1px dotted black;
height: 40px;
width: 60%;
z-index: 10000;" (click)="changeTextStyle($event)" (txtCChange)="changeTxtColor($event)"
(txtSChange)="changeTxtSize($event)">{{textarea}}</p>
<button (click)="removeTextArea(textarea_index)">Remove</button>
</ion-col>
</ion-row>
2.色码选择
<ion-row id="top-toolbar">
<ion-col>
<ion-scroll scrollX="true">
<ion-buttons id="ionBtnGroup">
<button *ngFor="let colour of availableColours" icon-only ion-button (click)="changeColour(colour)">
<ion-icon [style.color]="colour" name="brush"></ion-icon>
</button>
</ion-buttons>
</ion-scroll>
</ion-col>
</ion-row>
3.字体更改代码
<ion-buttons right *ngIf="!isDraw && !isRotate" >
<button color="dark" ion-button icon-only (click)="changeFontSize(10)"><div class="galeria"><span>10px</span></div></button>
<button color="dark" ion-button icon-only (click)="changeFontSize(15)"><div class="galeria"><span>15px</span></div></button>
<button color="dark" ion-button icon-only (click)="changeFontSize(20)"><div class="galeria"><span>20px</span></div></button>
<button color="dark" ion-button icon-only (click)="changeFontSize(30)"><div class="galeria"><span>30px</span></div></button>
<button color="dark" ion-button icon-only (click)="changeFontSize(50)"><div class="galeria"><span>50px</span></div></button>
</ion-buttons>
4.字体更改功能
changeFontSize(size){
this.selectedFontSize = size+'px';
this.txtSChange.emit({size: size+'px'});
}
5.换色功能
changeColour(colour){
if(this.isDraw){
this.currentColour = colour;
}else{
this.selectedColor = colour;
this.txtCChange.emit({color: colour});
}
}
6. 颜色和字体大小适用代码
@Output() txtCChange = new EventEmitter();
@Output() txtSChange = new EventEmitter();
changeTextStyle(event: Event){
let element = event.target as HTMLInputElement;
element.style.color = this.selectedColor;
element.style.fontSize = this.selectedFontSize;
}
changeTxtColor(event){
this.selectedColor = event.color;
this.changeTextStyle(event);
}
changeTxtSize(event){
this.selectedFontSize = event.size;
this.changeTextStyle(event);
}
如果有任何困惑,请告诉我。上面的代码不起作用。我想知道更有效的方法。
解决方案
我建议ngStyle
在你的*ngFor
循环中利用所有的 DOM 操作来进行样式设置。在 Angular 中直接操作 DOM 元素被认为是不可行的。这使您可以摆脱大量的操作代码。
里面的每个元素textAreasList
都应该是一个包含所有必要属性(如实际文本内容)和样式属性(如位置、颜色、大小等)的对象。示例:{ content: "Ravi1", style: {height: 40, width: 60, color: "#ff0000"} }
根据用户是先选择颜色然后在第二次单击中选择文本还是相反,您可以将选定的颜色(或选定的文本元素)存储在控制器中以引用它,一旦单击文本(单击颜色)。
模板:
<button *ngFor="let colour of availableColours" icon-only ion-button (click)="selectedColour = colour)">
<ion-icon [style.color]="colour" name="brush"></ion-icon>
</button>
<p [...] (click)="applyStyles(textarea)">{{textarea.content}}</p>
控制器:
applyStyles(textarea){
textarea.styles.colour = this.selectedColor;
}
推荐阅读
- java - 加载共享库 test/libaegean.dll 时出错:没有这样的文件或目录
- mysql - 事务方法不在数据库上写入更新
- javascript - 在茉莉花测试和 TypeError 中模拟“管道”:无法读取未定义的属性“管道”
- xamarin.forms - Xamarin.Forms 如何在 App 的所有页面上添加背景图片
- swift - SwiftUI Mac OS DatePicker 在编辑时跳回一天
- php - 当会话 cookie 在 Laravel 中过期时重新加载站点
- c# - TradingView/Binance 指标的历史数据
- javascript - 追加一个字符N次的最快方法
- python - 使用 @numpy.vectorize 在 pandas 中减去 2 个 datetime64 列
- java - 有什么方法可以在 WIre Mock 中测试数组类型查询参数