单击铅笔图标编辑内容

Question

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

<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 在变量 in.ts 和.html 之间建立了关系。 所以“简单的方法”是有一个 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>

看看你如何只在变量“editing”为假时显示“{{title}}”，并且只在变量“editing”为真时显示输入。

当您“单击”“铅笔”时，您将变量编辑设置为 true，当您从输入中失去焦点时，您将变量编辑设置为 false

好吧，你现在知道他基本了。 但我们正在改进代码。 如果您进行（单击）焦点转到输入，这很好。 所以我们将采用另一种方法：我们将使用 [style.display] 来显示或不显示“span”和“input”

<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>

并创建一个 function

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

看看我们如何编写响应事件的函数。html -Typicals events, (click), (input), (blur)....

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

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

还有更多，看看官方文档