迹忆客 专注技术分享

Angular 2 ng-disabled 是一个允许开发人员禁用表单控件的指令。 它可用于防止用户将数据输入到表单字段中，或者可用于禁用预填充数据的输入字段。

此属性可以添加到任何 HTML 元素，包括输入、按钮、选择和文本区域元素。

ng-disabled 指令不会改变元素的外观，但会阻止用户与其交互。 它可以应用于各种场景，例如在复选框未选中时禁用输入字段或在用户未登录时禁用按钮。

使用 Angular 2 ng-disabled 指令的步骤

使用 ng-disabled 的最简单方法是在组件的类上将 disabled 属性设置为 true。 这将禁用该组件，并且它不会在 DOM 中呈现。

本文将带您完成使用 Angular 2 ng-disabled 的步骤。

1. 导入模块

   将 ng-disabled 模块导入到您的 app.module.ts 文件中。

2. 添加 TypeScript 代码。

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: [ './app.component.css' ]
   })
   export class AppComponent  {
     public onClick(): void {
       console.log('> click');
     }
   
     public onBlockClick(): void {
       console.log('> stopped');
     }
   }
   

3. 禁用应用程序逻辑中的组件 通过添加 ng-disabled 作为输入参数并将其设置为 true 来禁用应用程序逻辑中的组件，如下所示：

   <h2>Example of Angular 2 ng-disabled</h2>
   <div
     (click)="onBlockClick()">
   <button [disabled]="true"
          (click)="onClick()">
    Home
   </button>
   </div>
   

在这里我们禁用了主页按钮。 您可以看到该按钮，但无法与之交互。

这就是 ng-disabled 在 Angular 2 中的工作方式。