NgIf
---- --------------- ---- ----- --------- --- ---- -------- - ---- ---- --------- -- - -- ---- ---- - --- ---- ---------- -- -------- ---- --------- -- --- ----- --- ------ ----- --- ---- ------------------ ---- --------- -- ------ ------- - ---- ----- ---
NgSwitch
有时候需要根据不同的条件,渲染不同的元素,此时我们可以使用多个 ngIf
来实现。
---- ------------------ ---- ------------ -- -------- -- ------- ---- ------------ -- -------- -- ------- ---- ------------ -- --- -- ----- -- -------- -- --------- ---------- ------
如果 myVar
的可选值多了一个 'C'
,就得相应增加判断逻辑:
---- ------------------ ---- ------------ -- -------- -- ------- ---- ------------ -- -------- -- ------- ---- ------------ -- -------- -- ------- ---- ------------ -- --- -- ----- -- --- -- ----- -- ----- --- -- --------- ---- ------ ------
可以发现 Var is something else
的判断逻辑,会随着 myVar
可选值的新增,变得越来越复杂。遇到这种情景,我们可以使用 ngSwitch
指令。
---- ----------------- ------------------- ---- ----------------------- -- ------- ---- ----------------------- -- ------- ---- ----------------------- -- ------- ---- ----------------------- -- --------- ---------- ------
NgStyle
NgStyle 让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。
- 设置元素的背景颜色
---- ---------------------------------- ----- --- ----- ------ ---------- ------
- 设置元素的字体大小
---- ----- -- - -- - ---- ----- ----- ------------------ ------- -------------------------------- --- ---- ------- ------
NgStyle 支持通过键值对的形式设置 DOM 元素的样式:
---- ------------------ -------- ------------------- --------- ---- ----- ----- ---- -- ---- ---------- ------
注意到 background-color
需要使用单引号,而 color
不需要。这其中的原因是,ng-style
要求的参数是一个 Javascript
对象,color
是一个有效的 key
,而 background-color
不是一个有效的 key
,所以需要添加 ''
。
NgClass
NgClass 接收一个对象字面量,对象的 key
是 CSS class 的名称,value
的值是 truthy/falsy
的值,表示是否应用该样式。
- CSS Class
--------- - ------- --- ------ ------ ----------------- ----- -
- HTML
---- --- ------- ----- --- ---- --------------------- ------------ -- ----- -------------- ---- --------------------- ----------- -- ------ -------------- ---- --- --------- -------- -------- --- ---- --------------------- ------------- ----- ------ -------- ------ -- ---------- - ---- - ----- -- ------ ---- ----- ----- -------- ------ --- ------------------------------- ----------- ----- ----- -------- ------ ---- --- ------ ----- ---- --- - ---- -- ----- ----- --- ---- ------------ ------------------- ---------- ---- ---- ------ ---- - ---- ---------- --- ----- ------- ------
NgFor
NgFor 指令用来根据集合(数组) ,创建 DOM
元素,类似于 ng1
中 ng-repeat
指令
---- --------- ----- ----------- - -- ------- --- --- - ------- ---- --------------- ----- -- - -- - -------- ------
使用 trackBy
提高列表的性能
------------ --------- --------- --------- - ---- --- ----------- ---- -- ------------------- --------------------------- ----- ------- ---------------------------- -------------- -- -- ------ ----- --- - ------------- - --------------- - ----- --- ---- --- ---- ---- - ---------- - --------------- - -------------------------- - -------------------- - ------ ----- --- ---- --- ---- --- ---- ---- - ---------------- ----- - ------ ------ -- -- ------- - -
NgNonBindable
ngNonBindable 指令用于告诉 Angular 编译器,无需编译页面中某个特定的HTML代码片段。
---- -------------------------- ----- ------------------- ------- --------- ----- ----------- ----------------- ------ ---- -- ---- -- ------- -- -------- ------- ------
Angular 4.x 新特性
If...Else Template Conditions
语法
-------- ----------------- ------------ ---- ----- ------------
使用示例
------------ ----------- ------ --- --- ------- -- --- --- ---------- -------------- -- ------------- ---- -------- --- ------ -- ----- ----- ----
<template>
—> <ng-template>
使用示例
------ - ---------- ------ - ---- ---------------- ------ - ---------- - ---- ------------------ ------ ------------------------- ------ -------------------------- ------------ --------- ---------- --------- - ------------ ------------- ------------------ -------------- -- ----------- - ------ ---- --------- --- ------ --------------- -- ---- -- -- ------ ----- ------------ ---------- ------ - ----- --------------- ---------- - --------- - ---------- ----- --------- ------------ --------- -------------- -- ---------- --------------- - ------- - -
我有话说
使用 [hidden]
属性控制元素可见性存在的问题
---- ------------------------- ------ ------ ------
上面的代码在通常情况下,都能正常工作。但当在对应的 DOM 元素上设置 display: flex
属性时,尽管[hidden]
对应的表达式为 true
,但元素却能正常显示。对于这种特殊情况,则推荐使用 *ngIf
。
直接使用 DOM
API 获取页面上的元素存在的问题
------------ --------- ---------- --------- - ------ ------------- ----- ---- ----- ------- ------ - -- ------ ----- ------ - --------------- ----------- - ------------------------------------------------ - -
以上的代码直接通过 querySelector()
获取页面中的元素,通常不推荐使用这种方式。更好的方案是使用 @ViewChild
和模板变量,具体示例如下:
------------ --------- ---------- --------- - ------ ----------- ------------- ----- ---- ----- ------- ------ - -- ------ ----- ------ ---------- ------------- - --------------------- ------ ----------- ------------------- --------- --------- -- ----------------- - ---------------------------------- ------------------------- --------- - -
另外值得注意的是,@ViewChild()
属性装饰器,还支持设置返回对象的类型,具体使用方式如下:
--------------------- --------- ----------- --------------------- ------ ------------------ --------- -----------------
若未设置 read
属性,则默认返回的是 ElementRef
对象实例。