常用指令简介

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 元素,类似于 ng1ng-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 对象实例。


上一篇:模板语法
下一篇:指令