如何使用角度删除对 div 单击的 tabindex 焦点？

如何解决如何使用角度删除对 div 单击的 tabindex 焦点？

我有以下代码。根据我的要求，

1. 如果我从键盘上按 Tab，那么 <div> 元素应该被聚焦并且 (click) 事件应该工作 - 它目前工作正常

2. 但是如果我用鼠标点击同一个 <div> 元素，那么这个 <div> 元素不应该被聚焦并且 (click) 事件应该起作用 - 这里 <div> element 只关注当前代码的第一次点击，不知道为什么？

我不确定我在这里做错了什么，请帮我解决这个问题。提前致谢。

Stackblitz

html：

<button>First</button> <br/>
<div tabindex="0" (click)="func();" (keyup.enter)="func();" appDivfocusout>Check Focus Out on Click</div> <br/>
<button>Second</button>

component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  func(){
    console.log("test message");
  }
}

directive.ts：

import { Directive,ElementRef,Renderer2,HostListener } from '@angular/core';

@Directive({
  selector: '[appDivfocusout]'
})
export class DivfocusoutDirective {

  constructor(private el: ElementRef,private renderer: Renderer2) { }

  @HostListener('click',['$event'])
  onClick(e){
    this.el.nativeElement.style.outline = 'none';
  }
}