Java教程

模板之数据绑定

本文主要是介绍模板之数据绑定,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

模板的组成

模板由两部分组成,一部分是标准的 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

这篇关于模板之数据绑定的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!