焦点事件中子元素的角点单击事件

Question

HTML

 <div class="right-inner-addon">
     <i  (click)="toggleSelection()" class="glyphicon glyphicon-search"></i>
     <input (focus)="focusInFunction()" (focusout)="focusOutFunction()" class="form-control" />
 </div>

TypeScript

    toggleSelection() {
     //performing some operation    
    }

    focusInFunction() {      ;
      this.showText = 'true';
    }

    focusOutFunction() {
      this.showText  = 'false';
    }

此处聚焦功能正常运行。但是，每当我单击字形图标时，它都不会触发toggleSelection（）事件，而是会调用focusInFunction（）方法。

任何帮助将不胜感激。谢谢。