Angular5小结--模板语法

时间 2019-12-05

标签 angular5 angular 小结模板语法栏目 AngularJS 繁體版

原文原文链接

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

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

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

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

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

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

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

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

<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在组件类逻辑中定义设置其值的方法。ui

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

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

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

*内置指令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 的类型检查器对特定的属性表达式，不作 "严格空值检测"