点击铅笔图标编辑内容

Question

我正在研究角度应用程序。我的页面中有一个标题，代码如下

<div>my Title
<fa name="pencil"></fa>
</div>

所以标题将用铅笔图标显示在它的附近/平行。我不想把它显示为文本字段，但当用户点击铅笔图标时，我想让用户输入标题。我该怎么做？

Answer 1

您可以使用：

<div (click)="onEdit()"><fa name="pencil"></fa></div>

和你的ts文件

onEdit() {
// JS Edit Code
}

Answer 2

Zaib，Angular在.ts和.html中的变量之间建立了关系；简单的方式"；is有一个div和一个输入。一个变量使您显示一个或另一个

editing:boolean=false;  //<--this is your variable in .ts
title:string="my Title"; //<--another variable 

<span *ngIf="!editing">{{title}}</span>
<input *ngIf="editing" [(ngModel)]="title" (blur)="editing=false">
<span (click)="editing=true"><fa name="pencil"></fa></span>

看看你如何只显示"；｛｛title｝｝"；如果变量"；编辑"；并且仅当变量"0"为假时显示输入；编辑"；是真的。

当你"；点击"；"；铅笔"；，您将变量编辑设置为true，当您从输入中失去焦点时，您将变量编辑器设置为false

好吧，你现在知道他基本了。但我们正在改进代码。如果你点击(点击(，焦点就会转移到输入上，这很好。因此，我们将采取另一种方式：我们将使用[style.display]来显示或不显示"；span"；以及"；输入"；

<span [style.display]="editing?'none':null">{{title}}</span>
<input #inputId [style.display]="!editing?'none':null" 
[(ngModel)]="title" (blur)="editing=false">
<span (click)="edit(inputId)"><fa name="pencil"></fa></span>

并创建一个功能

edit(element:any){
this.editing=true;
setTimeout(()=>{
element.focus()
})
}

看看我们如何在.html-Typicalsevents、(click(、(input(、(blur(…中编写响应事件的函数。。。。

此外，为了引用函数内部.ts中的变量，我们使用变量的this.+名称。

奇怪的"#inputId"；被称为模板引用变量，并允许我们引用html元素

还有更多，看看的官方文档