要禁用或启用Angular 6中的输入框,您可以使用Angular的属性绑定和事件绑定。下面是一个示例,展示如何使用本地引用来禁用或启用输入框。
在模板中,我们使用ngModel指令来绑定输入框的值,并使用[disabled]属性来绑定输入框的禁用状态。我们还使用了一个本地引用#myInput
来访问输入框的DOM元素。
在组件中,我们定义一个inputValue变量来存储输入框的值,并定义一个isDisabled变量来控制输入框的禁用状态。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
inputValue: string = '';
isDisabled: boolean = false;
toggleDisabled() {
this.isDisabled = !this.isDisabled;
// 使用本地引用来获取输入框的DOM元素
const inputElement: HTMLInputElement = document.querySelector('#myInput');
// 如果禁用状态为true,则禁用输入框;否则启用输入框
inputElement.disabled = this.isDisabled;
}
}
在上面的代码中,我们使用toggleDisabled方法来切换输入框的禁用状态。当点击按钮时,我们会将isDisabled变量的值取反,并使用本地引用#myInput
来获取输入框的DOM元素。然后,我们根据isDisabled的值来禁用或启用输入框。
请注意,直接操作DOM元素是不推荐的做法,但在某些情况下,可能需要使用本地引用来访问和操作DOM元素。