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,如需转载请自行联系原作者

目录
相关文章
|
7月前
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
56 0
|
4月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
6月前
|
JavaScript
Angular Component 属性绑定 target 和 attr.target 的区别
Angular Component 属性绑定 target 和 attr.target 的区别
35 0
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
101 0
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular元素属性绑定的一个例子
Angular元素属性绑定的一个例子
79 0
Angular元素属性绑定的一个例子
|
存储
Angular list列表绑定的一个例子
Angular list列表绑定的一个例子
117 0
Angular list列表绑定的一个例子
Angular 怎样绑定 Html
转载自  http://www.ngui.cc/index.html 我正在编写一个Angular应用程序,并且我想要显示一个HTML响应。
920 0
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2

热门文章

最新文章