angular 模版变量、模板表达式、模板语句

前端之家收集整理的这篇文章主要介绍了angular 模版变量、模板表达式、模板语句前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  • 模型-视图-控制器(MVC)
  • 模型-视图-视图模型(MVVM)
  • Angular 组件相当于 控制器视图模型
  • Angular 模版相当于 视图

变量

模版输入变量

<hero-detail *ngFor = "let hero of heroes"
             [hero] = "hero">
</hero-detail>
  • let关键字创建了一个名叫hero模板输入变量
  • ngFor指令每次迭代都从数组中把当前元素赋值给hero变量
  • 可以在ngFor的宿主元素(及其子元素)中引用模板输入变量hero

模版引用变量

  • 模板引用变量通常用来引用 模板中的某个DOM元素
  • 模板引用变量还可以用来引用Angular组件指令Web Component
  • 可以在模板中的任何地方引用模板引用变量
<button #buttonDOM></button>

{{buttonDOM}}
<button ref-buttonDOM></button>

{{buttonDOM}}
[object HTMLButtonElement]
  • 模板引用变量的值默认是设置模板引用变量的元素
  • 模板引用变量的值也可以设置为其它内容的引用(比如表单中引用为ngForm指令)
<form #myForm="ngForm">

</form>

表达式

插值表达式

说明

插值表达式:在视图模板中,{{ }}{{ }}中的内容

  • {{ }}中的内容,称为模版表达式
  • {{ }}中的内容通常是组建类的属性方法
  • Angular 对{{ }}中的内容,先求值,再转成字符串

使用

<p> {{ name }} </p>
<img src="{{ imgUrl }}">

模版表达式

说明

模板表达式产生一个值。

模板表达式不支持内容

  • 赋值(=
  • 操作并赋值(+=-=...
  • 自增、自减(++--
  • new 运算符
  • 使用;,的链式表达式
  • 位运算(|&

支持内容(模版表达式运算符):

  • |?.、和 !

使用

{{ 1 + 1 }}
[property] = "expression"

表达式上下文

表达式上下文 是模版中各种绑定值的来源。

表达式上下文包括(优先级由高到低):

  • 模版输入变量
  • 模版引用变量
  • 指令的上下文变量
  • 模版对应组建类的实例

注意

  • 模板表达式只能引用表达式上下文中的成员
  • 模板表达式不能引用全局命名空间中的任何东西(比如:windowdocumentconsole.log

模板表达式操作符

管道操作符(|

管道是一个简单的函数,它接受一个输入值,并返回转换结果。

  • 管道操作符会把它左侧的表达式结果传给它右侧的管道函数

安全导航操作符(?.

  • 安全导航操作符用来保护出现在属性路径中nullundefined值,保护视图渲染器,让它免于失败。

person不存在时,下面代码将报错,组件视图将无法渲染。

{{person.name}}

传统解决方法

<ng-container *ngIf="person">
    {{person.name}}
</ng-container>
{{person && person.name}}

安全导航操作符方式:

{{person?.name}}

非空断言操作符(!

  • 在 TypeScript 2.0 中,可以使用--strictNullChecks标志强制开启严格空值检查。
  • 在严格空值检查模式下,如果有未赋值的变量,或者试图把nullundefined赋值给不允许为空的变量,类型检查器就会抛出一个错误
  • 在严格空值检查模式下,如果类型检查器在运行期间无法确定一个变量是否是nullundefined,也会抛出一个错误
  • 非空断言操作符(!)用于告诉 TypeScript 的类型检查器对特定的属性表达式,不做 "严格空值检测"。
<div *ngIf="hero">
    {{hero!.name}}
</div>

语句

模版语句

说明

模板语句用来响应由绑定目标(如 HTML 元素、组件或指令)触发的事件。

不支持内容

  • 操作并赋值(+=-=...
  • 自增、自减(++--
  • new 运算符
  • 位运算(|&
  • 模版表达式运算符

支持内容

  • 赋值(=
  • 使用;,的链式表达式

使用

  • 事件绑定
(event)="statement"

语句上下文

语句上下文包括

  • 模版的$event对象
  • 模版输入变量
  • 模版引用变量
  • 模版对应组件类的实例

注意

  • 模板语句只能引用语句上下文中的成员
  • 模板语句不能引用全局命名空间中的任何东西(比如:windowdocumentconsole.log
原文链接:https://www.f2er.com/angularjs/145866.html

猜你在找的Angularjs相关文章