显示密码指令

在密码输入框中，通过将输入框类型属性改为 text 即可轻松显示文本内容。为简化此操作，您可以使用 @abp/ng.core 包提供的 ShowPasswordDirective 指令。

快速开始

ShowPasswordDirective 是独立指令。要在HTML模板中使用该指令，请先将其导入组件：

导入到组件

import { ShowPasswordDirective } from '@abp/ng.core';

@Component({
  //...
  imports: [
   // ...,
   ShowPasswordDirective
  ],
})
export class TestComponent {}

使用方法

ShowPasswordDirective 使用非常简单。该指令的选择器是 abpShowPassword。通过在输入框元素上添加 abpShowPassword 属性，即可为该输入框激活 ShowPasswordDirective 功能。

查看使用示例：

import { ShowPasswordDirective } from '@abp/ng.core';
@Component({
  selector: 'sample-component',
  template: `
    <div class="d-flex flex-column">
      <label>密码</label>
      <input [abpShowPassword]="showPassword"/>
      <i (click)="showPassword = !showPassword">图标</i>
    </div>
  `,
  imports: [ShowPasswordDirective]
})
export class SampleComponent{
  showPassword = false;
}

abpShowPassword 属性已被添加到 <input> 元素。点击图标即可激活 ShowPasswordDirective 功能。

查看效果：

点击图标查看密码输入内容：