Angular2模板语法总结

RiverLi 发布于2019-08-30 15:55 / 1800人阅读

摘要：模板语法插值表达式如模板表达式模板表达式产生一个值。如双向数据绑定一绑定语法概览提供了各种各样的数据绑定，本章将逐一讨论。这个目标可能是元素组件指令的元素组件指令的事件，或极少数情况下名。类绑定绑定的语法与属性绑定类似。

1、模板语法

1、插值表达式 ( {{...}} ) 如： {{data.title}}

2、模板表达式（[property]=“expression”）模板表达式产生一个值。 JavaScript
中那些具有或可能引发副作用的表达式是被禁止的，包括：赋值 (=, +=, -=, ...) new 运算符
使用 ; 或 , 的链式表达式自增和自减运算符：++ 和 --

3、模板语句（(event)="statement"）模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。
如：

4、双向数据绑定 ( [(...)]

一、绑定语法：概览

Angular 提供了各种各样的数据绑定，本章将逐一讨论。先从高层视角来看看 Angular 数据绑定及其语法。
绑定的类型可以根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

二、绑定目标

数据绑定的目标是 DOM 中的某些东西。这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名。下面是的汇总表：

三、attribute、class 和 style 绑定

attribute 绑定

attribute和property都可以翻译成属性。但是前面所说的属性绑定是Property binding，而这里说的是ttribute绑定。

Property——属性
attribute——特性

简单的理解:
Attribute就是DOM节点自带的属性，例如html中常用的id、class 、title、align.
Property是这个DOM元素作为对象，其附加的内容, 例如childNodes、firstChild.

注意：
常用的Attribute，例如id、class 、title等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute，就不会有这样的特殊优待。

因此，当元素没有属性可绑的时候，就必须使用 attribute 绑定。
考虑 ARIA， SVG 和 table 中的 colspan / rowspan 等 attribute。它们是纯粹的 attribute，没有对应的属性可供绑定。
如果想写出类似下面这样的东西，现状会令我们痛苦：

Three-Four

会得到这个错误：

  Template parse errors:
  Can"t bind to "colspan" since it isn"t a known native property
 （模板解析错误：不能绑定到 "colspan"，因为它不是已知的原生属性）

正如提示中所说，元素没有colspan属性。它只有colspan特性，但是插值表达式和属性绑定只能设置属性，并不能设置特性attribute。

CSS 绑定

借助 CSS 类绑定，可以从元素的 class attribute 上添加和移除 CSS 类名。

CSS 类绑定绑定的语法与属性绑定类似。但方括号中的部分不是元素的属性名，而是由class前缀，一个点 (.)和 CSS 类的名字组成，其中后两部分是可选的。形如：[class.class-name]。
1、[style.propertyName]，如：

CSS 绑定方式1

2、[ngStyle]
所以上面的例子，我们就可以直接使用[ngStyle]来动态绑定button的font-size和margin。如：

  CSS 绑定方式2
  private PStyle: any = {
     margin: "10px",
     fontSize: "2em"
 };

3[class.className]使用这种方式，我们可以根据绑定变量的值来动态添加或者移除css class。

CLASS 绑定

class绑定跟css绑定类似，
1、[class.className]

2、[ngClass]

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117126.html

Angular2模板语法总结

摘要：模板语法插值表达式如模板表达式模板表达式产生一个值。如双向数据绑定一绑定语法概览提供了各种各样的数据绑定，本章将逐一讨论。这个目标可能是元素组件指令的元素组件指令的事件，或极少数情况下名。类绑定绑定的语法与属性绑定类似。 1、模板语法 1、插值表达式 ( {{...}} ) 如： {{data.title}} 2、模板表达式（[property]=expression）模板表达式...

avwu 2019-08-02 13:57 评论0 收藏0
Angular2模板语法总结

摘要：模板语法插值表达式如模板表达式模板表达式产生一个值。如双向数据绑定一绑定语法概览提供了各种各样的数据绑定，本章将逐一讨论。这个目标可能是元素组件指令的元素组件指令的事件，或极少数情况下名。类绑定绑定的语法与属性绑定类似。 1、模板语法 1、插值表达式 ( {{...}} ) 如： {{data.title}} 2、模板表达式（[property]=expression）模板表达式...

bigdevil_s 2019-08-26 13:26 评论0 收藏0
Angular 2 快速上手

摘要：为了简单起见，在本文中将会使用。已经实例化了并且将它的模板载入到了元素中。中的依赖注入发生在该类的构造函数中，因此我们将在构造函数中注入。国内 Angular2 资料比较少，这里看到一篇不错的入门文章就分享过来了 —— Angular 2 快速上手，这里面还有很多有关于 Angular2 的文章，感兴趣的朋友可以去看一看目前angular2已经来到了beta版，这意味着它已经做好了...

singerye 2019-08-19 17:38 评论0 收藏0
Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0
AngularJS 2 Quick Start

摘要：引言是用于构建基于浏览器的复杂应用的下一代框架。它涵盖了的一些基本概念，包括组件模型服务管道传入传出以及事件播散等使用方法，并介绍了项目的基本组织结构等。用于双向绑定，使用来定义，专门用于定义双向绑定。引言 Angular2 是 Google 用于构建基于浏览器的复杂应用的下一代 MV* 框架。该项目是我学习 Angular2 的入门项目，我觉得它很友好地表达了 Angular2 的...

Channe 2019-08-19 17:43 评论0 收藏0