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 对象实例。