zoukankan      html  css  js  c++  java
  • 模板语法学习

    学习angular2组件里的模板html语法相关内容,做了一些总结

    参照https://www.angular.cn/guide/template-syntax#binding-syntax-an-overview

    一、通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。

    二、模板表达式

    angular对该表达式求值转化为字符串。表达式的上下文可以是:模板输入变量(let a)、模板引用变量(#)、和组件成员

    三、模板语句

    (click)="add(a)",用于事件绑定。上下文通常是组件的方法,不过变量a可以是模板输入变量和模板引用变量

    四、语法绑定概览

    绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

    模板绑定是通过DOM property 和事件来工作的,而不是HTML attribute,在angular的数据绑定中,永远只考虑dom的property(除了某些特例,在没有property可绑定时,使用attribute绑定:[arr.attribute],原因在于property和attribute不一定是对应的):

    attribute 初始化 DOM property,然后它们的任务就完成了。property 的值可以改变;attribute 的值不能改变。例如,当浏览器渲染 <input type="text" value="Bob"> 时,它将创建相应 DOM 节点, 它的 value 这个 property 被初始化为 “Bob”。当用户在输入框中输入 “Sally” 时,DOM 元素的 value 这个 property 变成了 “Sally”。 但是该 HTML 的 value 这个 attribute 保持不变。如果你读取 input 元素的 attribute,就会发现确实没变: input.getAttribute('value') // 返回 "Bob"。

    绑定目标:强烈建议看官方文档的介绍:组件与模板-模板语法

    绑定按绑定目标分类:属性(property)绑定、attribute绑定、css绑定、style绑定、事件绑定、双向数据绑定、

    五、内置指令

    分为属性指令和结构型指令

    常用内置属性指令:NgClass、NgStyle、NgModel,主要是改变属性

    常见内置结构型指令:NgForOf、NgIf,主要是改变dom的结构

    六、输入输出属性 满足组件之间的调用

    @Input 一个组件想要绑定另一个组建的属性,属性一定要是定义为input

    @Output 一般用于组件之间的事件传递绑定EventEmitter

    是输入还是输出从数据的流向考虑就行,属性就是输入的,事件是传出所以是输出

    七、模板表达式操作符

    |和?

  • 相关阅读:
    typeof与instanceof
    TCP与UDP的区别
    const、let、var关键字
    基本通用的使用jdbc文件java代码连接数据库
    HTML知识点01
    ADO.NET基础02
    ADO.NET基础03
    数据库语法01
    数据库语法02
    Ubuntu16.4 内核降级
  • 原文地址:https://www.cnblogs.com/hahlzj/p/11159720.html
Copyright © 2011-2022 走看看