Angular 如何显示单击的文本？

我有一个空div，下面有3个元素的列表。如何在空div中显示单击的文本？谢谢

<div></div>
<span>link one</span>
<span>link two</span>
<span>link three</span>

链接一
链接二
链接三

下面是HTML代码。

    <div>{{selectedLink}}</div>

    <div>
       <span (click)='linkClicked(item.LinkName)' *ngFor="let item of Items"> 
        {{item.LinkName}} 
       </span>
    </div>

    selectedLink: string; // declare global variable 

    //Add this method 
    linkClicked(linkName:string){
     this.selectedLink = linkName;
    }

---

您应该在组件中全局声明一个变量

 linkValue: string; 

那么你的html应该是

    <div style="color:green">{{linkValue}}</div>
    <br/>
    <br/>
    <span (click)="linkValue=$event.target.innerText">link one</span>
    <br/>
    <span (click)="linkValue=$event.target.innerText">link two</span>
    <br/>
    <span (click)="linkValue=$event.target.innerText">link three</span> 
    <br/>

{{linkValue}




链接一


链接二


链接三

对不起！在发布了这个答案之后，我看到了你的评论

这里有工作

.html

选择一个
{{selectedLink}}
{{item.name}

link one link two`这只是一个速记，你应该创建一个方法来执行这些操作。我想出来了。在HTML中使用$event，然后通过typescript中的event.target.innerText获取innerHTML。将其指定给可以插入空div的变量。@Mark我强烈建议不要这样做。在Angular中手动注入html是导致大量问题的途径。所有角度引导都不会发生在注入的html上。joyBlanks的评论是一个更好的建议。谢谢。这也是我使用的方式。

 myItems=[{name:"link"},{name:"link1"},{name:"link2"},{name:"link3"}]
 selectedLink;
 clickeMe(input) : void{
    console.log('event element',input);
    this.selectedLink=JSON.stringify(input);
  }

<span>select one</span>

    <div>{{selectedLink}}</div>

    <div>
       <span (click)='clickeMe(item)' *ngFor="let item of myItems"> 
        {{item.name}} 
       </span>
    </div>