要解决这个问题,你可以使用Angular 2的双向绑定和事件绑定功能。
首先,在你的模板中,你需要一个文本框和一个按钮。文本框将用于用户输入或粘贴文本,按钮将用于禁用或启用。
接下来,在你的组件类中,你需要定义textInput
变量来保存用户输入的文本,并定义isButtonDisabled
变量来控制按钮的禁用状态。当用户在文本框中输入或粘贴文本时,你需要更新isButtonDisabled
变量的值。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
textInput: string;
isButtonDisabled: boolean = true;
onInputChange() {
if (this.textInput && this.textInput.trim().length > 0) {
this.isButtonDisabled = false;
} else {
this.isButtonDisabled = true;
}
}
}
在上面的代码中,我们使用了ngModel
指令来实现文本框的双向绑定,将用户输入的文本保存到textInput
变量中。我们还使用了(input)
事件来监听文本框的输入事件,并在onInputChange()
方法中更新isButtonDisabled
变量的值。如果textInput
变量中有非空格字符,我们将禁用按钮,否则启用按钮。
这样,当用户在文本框中输入或粘贴空格时,按钮将被禁用。