在Angular中，如何在指令中实现button:focus大纲：none

Question

在我的 css 文件中，我为我的按钮制作了大纲：none。

.my-btn:focus {
outline: none;
}

现在我想为我的按钮创建一个指令，它也将执行此操作。这样的指令怎么写？

提前致谢。

Answer 1

您可以创建指令并根据您的要求在 focus/fousin 上设置 @HostListener

@HostListener('focus')

并使用 ElementRef 设置 nativeElement.style.outline = none;

Answer 2

使用 ng g d unfocus-btn
在UnfocusButtonDirective.ts中写入如下代码；

@Directive({ selector: '[unfocus]' })

export class UnfocusButtonDirective {

  constructor(private el: ElementRef) { }

  @HostListener('focus')
  private onButtonFocus() {
    this.el.nativeElement.style.outline = 'none';
  }

}

在 HTML 需要该指令的地方使用

<button type="button" unfocus >Submit</button> // 在此处添加指令

在最近的 module.ts 文件或应用程序中声明您的指令。module.ts 文件

@NgModule({ declarations: [UnfocusButtonDirective] })

就是这样。一切就绪。

在Angular中，如何在指令中实现button:focus大纲：none

In Angular, how to implement button:focus outline: none in a directive

css

angular

angular-directive

angular2-directives