Angular 4 绑定-阿里云开发者社区

开发者社区> zting科技> 正文

Angular 4 绑定

简介:
+关注继续查看

一、事件绑定

1. 创建doOnClick函数

 

2. 网页中绑定doOnClick方法

 

 3. 效果图

 

二、 属性绑定

1. 定义imgUrl的网址

 

2. 定义img  src属性

 另外一种写法

 

3. html 属性绑定

在网页中绑定size

 

4. css html 属性绑定

html绑定

 

5. css增加属性

原先已经有a 和b属性,

之后增加c属性

 6. ngClass管理多个css

html code

1
<div [ngClass]="divClass">HI</div>

 

7. 样式属性

 

带有单位(px)的样式

1
<div [style.font-size.px]="isDev?'100':'50'">是否是开发环境</div>

  

 

8.ngStyle使用

1
<div [ngStyle]="divStyle">haha</div>

 divStle定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
divStyle: any = {
  color: 'red',
  background: 'yellow',
};
 
 
constructor() {
  setTimeout(() => {
    this.divStyle = {
      color: 'yellow',
      background: 'red',
    };
 
  }, 3000);
}

另一种情况的使用

其中recListWidth是自定义的变量

 

三、双向绑定

html代码

 app.module.ts 加入FormsModule

 



本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7250101.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9496 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26741 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11210 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13185 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9054 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4012 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6893 0
+关注
3550
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载