为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 模板之数据绑定

模板之数据绑定

2021.09.07 10:25 485浏览

模板的组成

模板由两部分组成,一部分是标准的 HTML 标签,另一部分是 Angular 的模板语法。
模板语法可以分为三种类型:数据绑定,指令和管道
这些模板语法会根据业务逻辑,数据状态来渲染 HTML。

数据绑定

组件类中的属性、方法和模板之间建立的一种带有方向性的映射关系,就叫做数据绑定。
数据绑定可以划分为以下四种:

文本插值

将组件类中的属性(字符串为主)绑定到模板,就叫做文本插值。

例子:

// html
<p>
  {{ currentYear }}
</p>

// ts
currentYear = new Date().getFullYear();

*一般来说,双花括号里通常是变量或者表达式,Angular 会首先对这个变量或者表达式进行求值,然后将结果转换为字符串展示出来。

属性绑定

同样的,属性绑定也是将组件类中的属性绑定到模板上。比如下面的例子,文本插值和属性绑定可以达到相同的效果。

例子:

// html
<section>
  <p title="{{ currentYear }}">文本插值</p>
  <p [title]="currentYear">属性绑定</p>
</section>

// ts
currentYear = new Date().getFullYear();

*把要绑定的属性放在方括号 [ ] 内,Angular 就会将等号右侧的内容当作变量或表达式进行求值,否则,只会当作字符串处理。

在自定义标签中使用属性绑定,可以实现父组件向子组件传递数据的功能。

例子:

<talent-child *ngIf="param" [param]="param"></talent-child>

事件绑定

与前两种数据绑定方向相反,事件绑定是在模板中监听用户的行为,比如鼠标点击等,然后将这些行为和信息传递回组件类中,并做出相应的处理。

例子:

// html
<button (click)="onSave()">Save</button>

// ts
onSave(){
    console.log('click');
  }

在自定义标签中使用事件绑定(自定义事件),可以实现子组件向父组件传递数据的功能。

例子:

<talent-child (closeDrawer)="closeDrawer()"></talent-child>

*父组件和子组件之间的数据传递,不但涉及到属性绑定和事件绑定,还会使用到 @Input() 和 @Output()两个装饰器,在此就不再进行详细讲解,可以关注后续手记。

双向绑定

双向绑定是属性绑定和事件绑定的结合,用户的输入会自动更新到组件类中对应的属性上,而组件类中对应属性的变化也会立即反映到模板上。

例子:

// 模块文件需要引入:
// import { FormsModule } from "@angular/forms";

// html
<section>
  <input [(ngModel)]="text">
  <p>{{ text }}</p>
</section>

// ts
text = 'hello';

end

点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
JS工程师
手记
粉丝
1.4万
获赞与收藏
689

关注TA,一起探索更多经验知识

作者相关文章
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消