angular 属性绑定 事件绑定(点击事件)

实例:2s后按钮由禁用转为启用状态 且可点击创建服务

效果图:
在这里插入图片描述
点击按钮后
在这里插入图片描述

html页面按钮 和 提示文字 设置

<button [disabled]="!allow" (click)="createserve()">{{text}}</button>
//[disabled]是属性设置 控制按钮是否禁用  " "引号内容是调用ts文件里的变量
//(click)按钮点击事件绑定,等号右边是调用ts文件里的创建服务函数 
{{prompttext}}
//插值表达式 引用变量

ts文件 类的定义中 变量和函数的设置

export class MyownComponent{
	allow=false;
	text="2s后可点击创建服务";
//构造函数 功能:实现两秒后启用按钮 并改变按钮上的文字
constructor(){
	setTimeout(()=>{
		this.allow=true;
		this.text="点击创建服务";
		},2000)
}
	prompttext="服务没有被创建";

//点击按钮控制提示语的改变
	createserve(){
		this.prompttext="服务已经创建!"
	}	
			
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值