Angular5小结--模板语法

不合法的HTML: <script>__、<html>、<body>和<base>。

不合法的插值表达式与模板语句：

赋值 (=, +=, -=, ...)
new运算符
使用;或,的链式表达式
自增或自减操作符 (++和--)
不支持位运算|和&
具有新的模板表达式运算符，比如|、?.和!。

同名变量的优先级： 表达式中的上下文变量是由**模板变量、指令的上下文变量（如果有）和组件的成员**叠加而成的,且只能引用表达式上下文中的成员（什么console.log，window,do啊不能使用）。如果我们要引用的变量名存在于一个以上的命名空间中，模板变量>指令>组件

**HTML Attribute与DOM Property的区别：**这样理解，attrbute是html与生俱来的，一旦初始化无法改变的; property是XML中拥有的attr“超集”，在Angular中，所有模板绑定的是property，而不是attribute。（理解参考无法通过修改attr来修改disabled按钮的使用）

属性绑定的方括号[]: 当属性是一个不变的值，可以省略方括号，如：

<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>

attribute属性绑定： 像下面这段代码，无法直接绑定属性colspan，因为colspan没有对应的property。

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>   
<tr><td [attr.colspan]="{{1 + 1}}">Three-Four</td></tr> //使用[attr.xx]的形式绑定对应的attribute

class类名绑定：[class.myclassName]="ifShort" ,绑定多个类使用ngClass,将[ngClass]="setClassObj",setClassObj在组件类逻辑中定义设置其值的方法。

setClass() {
    this.setClassObj = {
        classA : this.isA,
        classB : this.isB  //由isA isB的布尔值控制对应的classA、classB
    }
}

同理ngstryle和[style.XXX]是一样的使用场景

ngModule指令的使用：[(ngModule)]使用前一定要记得导入formModule，单纯的值双向绑定用ngModule，复杂的绑定还是使用展开形式

*内置指令NgIf NgSwitch NgForOf: 注意：一个元素上只能使用一个内置指令；NgIf有一个很好的作用--防范空指针错误：当一个表达式尝试访问空值的属性时，Angular就会抛出一个异常；NgFor="xxx"当中，XXX是“微语法”而不是模板表达式，NgFor中获取循环索引使用index，防止相同item的销毁与创建使用trackBy，如ngfor = "let item of items; let i = index; track: trackByFun", 详见API;

#myform="ngForm"模板引用： 这样的引用使得myform成为了ngForm指令的引用（前提是该组件导入了formModule）。

@output()和@input():

// 1.
@Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...

// 2.
@Directive({
  outputs: ['clicks:myClick']  // propertyName:alias
})

操作符（| ？！）： 安全操作符"？"可以避免NgIf和&&的繁琐判断；非空断言操作符"！"不会防止出现null或undefined。它只是告诉 TypeScript 的类型检查器对特定的属性表达式，不做 "严格空值检测"

Angular5小结--模板语法

猜你喜欢