Angular 属性绑定 模版表达式

这一节,我们主要讲angular的模版表达式,以及属性、class、style、事件的绑定~
原文阅读

插值与模板表达式

所谓 “插值” ,就是指将表达式嵌入到标记文本中。 默认情况下,插值会用双花括号 {{ }}作为分隔符。(跟vue一致)

可以有如下几种情况:

//src/app/app.component.ts
...
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
  itemImageUrl = './image/1.png';
  getVal(): number {
    return 10;
  }
}
//src/app/app.component.html
...
<!-- 直接使用 -->
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<!-- 调用方法 -->
<div>Value: {{ getVal() }}/div>
<!-- 用作运算-->
<p>The sum of 1 + 1 is {{1 + 1}}.</p>
<!-- 结合使用 -->
<p>{{price * 0.7 + getVal()}}.</p>
<!-- 绑定属性-->
<div><img src="{{itemImageUrl}}"></div>

当使用模板表达式时,请遵循下列指南:

  • 最好是简单的运算,以便代码能够迅速执行;
  • 不能使用那些具有或可能引发副作用的 JavaScript 表达式:
    • 赋值(=, +=, -=, …))
    • new、typeof、instanceof 等运算符
    • 自增和自减运算符:++ 和 –
    • 不支持位运算,比如 | 和 &

属性绑定

属性绑定形式大概有三种方式:

  • 使用[]: [property]=“变量”
  • 使用bind-: bind-src=“变量”
  • 插值表达式:src="{{user.pic}}"
// src/app/app.component.ts 
... 
export class AppComponent { 
  picUrl = './image/1.png'; 
  picAlt = 'pic goode';
  pic = {
    url: './image/1.png',
    alt: 'pic goode'
  };
  isUnchanged: true;
  customTitle: 'custom title';
}

// src/app/app.component.html
...
// 使用 []
<img [src]="picUrl" [alt]="picAlt" />
<button [disabled]="isUnchanged">Disabled Button</button>
/****************** 特别提示 start *********************/
// 这样会报错
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr> 
// 正确写法
<tr><td [colSpan]="1 + 1">Three-Four</td></tr>
/****************** 特别提示 end **********************/
// 使用bind
<img bind-src="picUrl" bind-alt="picAlt" />
// 插值
<img src="{{ pic.url }}" alt="{{ pic.alt }}" />
// 绑定自定义属性
<span [attr.data-title]="customTitle">some words</span>
<span [attr.title]="customTitle">title</span>

虽然上面三种方式都可以绑定,但是建议在项目中采取其中一种形式,保持代码的统一性也很重要哦~

class绑定

绑定单个class

语法:[class.ClassName]="boolean | undefined | null"

//src/app/app.component.ts 
... 
export class AppComponent { 
  theme = 'primary';
  isSuccess = true;
} 
//src/app/app.component.html 
... 
<div class="btn" [class.btn-primary]="theme === 'primary'">Primary</div>
<div class="btn" [class.btn-secondary]="true">secondary</div>
<div class="btn" [class.btn-success]="isSuccess">success</div>
<div class="btn" [class.btn-danger]="'啦啦啦'">danger</div>
<div class="btn" [class.btn-danger]="0">danger</div>
<div class="btn" [class.btn-danger]="undefined">danger</div>

绑定多个class

语法:[class]="classExpression"

// src/app/app.component.ts 
... 
export class AppComponent { 
  btnCls = 'btn btn-primary'; // 字符串,空格分隔
  btnCls2 = ['btn', 'btn-success']; 
  btnCls3 = {
    btn: true,
    'btn-info': true
  };
} 
// src/app/app.component.html 
...
<div class="btn" [class]="btnCls">btnCls</div>
<div class="btn" [class]="btnCls2">btnCls2</div>
<div class="btn" [class]="btnCls3">btnCls3</div>
<!-- 也可以用内置指令ngClass -->
<div class="btn" [ngClass]="btnCls">btnCls</div>
<div class="btn" [ngClass]="btnCls2">btnCls2</div>
<div class="btn" [ngClass]="btnCls3">btnCls3</div>

属性样式

单一样式绑定

语法: [style.width]="string | undefined | null"

// src/app/app.component.html 
... 
<p [style.color]="'#f60'">some words</p>
<p [style.height]="'50px'" [style.border]="'1px solid'">属性值中带单位px</p>
<p [style.height.px]="50" [style.border]="'1px solid'">单位px不在属性值中</p>

多重样式绑定

语法:[style]="styleExpression"

// src/app/app.component.ts 
... 
export class AppComponent {
  style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;';
  style2 = {
    width: '200px',
    height: '50px',
    'text-align': 'center',
    border: '1px solid'
  };
} 
// src/app/app.component.html 
... 
<p [style]="style1">style1</p>
<p [style]="style2">style2</p>
/******提示:不能使用数组形式的参数 style3 = ['width', '200px'];******/

样式优先级

  • 某个类或样式绑定越具体,它的优先级就越高
  • 绑定总是优先于静态属性

事件绑定

语法:在这里插入图片描述

// src/app/app.component.ts 
... 
export class AppComponent { 
  onClick() {
    console.log('onClick');
  };
  onClick2(event: MouseEvent) {
    console.log('onClick', event.target);
  };
} 
// src/app/app.component.html 
...
<!-- 不同于vue,这里需要用()来调用函数 -->
<div (click)="onClick()">btn</div>
<!-- 这里一定是$event,就是原生的事件对象-->
<div (click)="onClick2($event)">btn2</div>
<!-- 绑定方法的等号后面可以写任意js代码--> 
<div ((click)="$event.preventDefault();text = 'a';">btn2</div>

至此,我们常用的插值、模版表达式与绑定属性介绍完毕,总的来说还算简单,唯一需要注意的就是保持代码格式统一,不然显得很乱。

还是老样子,欢迎关注我的公众号,公众号会最先更新
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yanyi24

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值