您當前位置：首頁 > web前端 > htmlcss > 第四章　內建組件

第四章　內建組件

來源：程序員人生發布時間：2016-06-25 08:17:20 閱讀次數：4279次

介紹

angular2提供了很多內建的組件,在這1章,我們會分別介紹它們,并展現1些怎樣使用它們的例子.

:fa-info-circle:內建組件可以直接導入到項目中來,而不需要像我們前面介紹1樣使用directives導入

NgIf

當你想要根據1個特定的條件顯示或隱藏1個組件的時候,你可使用NgIf,條件是1個返回boolean類型的ng2的表達式.
如果表達式返回false,元素將從DOM樹種移除,如果為true,則會顯示.

<div *ngIf="false" > </div> <!-- 絕不顯示 -->
< div * ngIf="a > b" > </div> <!-- 當A大于B的時候顯示 -->
< div * ngIf="str == 'yes'" > </div> <!-- 如果字符串值為yes的時候顯示 -->
< div * ngIf="myFunc()" > </div> <!-- 如果myFunc函數返回true的時候顯示 -->

:fa-info-circle:如果你有使用ng1的經驗,你可能會使用ngIf.在ng2中,你可以直代替換.另外一方面,你也能夠選擇ng2提供的非內建ng-show.如果你的目標是改變某個元素的CSS顯示,你也能夠是使用ng-style或class屬性,這些將在后面介紹

NgSwich

有時,你想要去根據不同的條件顯示不同的元素,你可以重復使用NgIf來完成.

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>

像你看到的1樣,當既不是A也不是B的時候,看起來是不太好看的.這個如果有1個else的選項就行了.另外,如果條件提交愈來愈多,這個例子會變得愈來愈復雜.

為了描寫這類復雜清單,斟酌1個具有C的例子,代碼以下:

<div class="container">
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">Var is something els\ e
    </div>
  </div>

為了簡化這個操作,ng2提供了ngSwitch來處理這類問題.
如果你熟習switch語法,ngSwitch是很好理解的,它跟switch的原理是1樣的.

這個組件的理念是:使用1個簡單表達式作為條件,基于這個表達式的值來做操作.

進程以下:

使用ngSwitchWhen指令描寫表達式的值

處理所有的可能,其他可能使用ngSwitchDefault來表述

讓我們看看使用NgSwitch的代碼:

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchWhen="'A'">Var is A</div>
    <div *ngSwitchWhen="'B'">Var is B</div>
    <div *ngSwitchDefault>Var is something else</div>
  </div>

如果我們插入1個C的值,代碼會變成下面這樣:

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchWhen="'A'">Var is A</div>
    <div *ngSwitchWhen="'B'">Var is B</div>
    <div *ngSwitchWhen="'C'">Var is C</div>
    <div *ngSwitchDefault>Var is something else</div>
  </div>

我們不會去關注默許條件究竟是甚么.
ngSwitchDefault是可選的,如果我們不寫出來,當甚么條件都不滿足的時候,將會甚么都不顯示.

你也能夠根據不同的元素定義1些相同的ngSwitchWhen,下面是1個例子:

code/built_in_components/ng_switch/app.ts

@Component({
  selector: 'switch-sample-app',
  template: `
    <h4 class="ui horizontal divider header">
      Current choice is {{ choice }}
    </h4>

    <div class="ui raised segment">
      <ul [ngSwitch]="choice">
        <li *ngSwitchWhen="1">First choice</li>
        <li *ngSwitchWhen="2">Second choice</li>
        <li *ngSwitchWhen="3">Third choice</li>
        <li *ngSwitchWhen="4">Fourth choice</li>
        <li *ngSwitchWhen="2">Second choice, again</li>
        <li *ngSwitchDefault>Default choice</li>
      </ul>
    </div>

    <div style="margin-top: 20px;">
      <button class="ui primary button" (click)="nextChoice()">
        Next choice
      </button>
    </div>
  `
})
class SwitchSampleApp {
  choice: number;

  constructor() {
    this.choice = 1;
  }

  nextChoice() {
    this.choice += 1;

    if (this.choice > 5) {
      this.choice = 1;
    }
  }
}

ngSwitchWhen的另外一個特性是不限制你去使用相同的條件1次,你可以是相同的條件屢次.

NgStyle

使用NgStyle,你可使用ng2表達式來設置給定元素的CSS屬性.
使用這個指令的最簡單方式是:[style.]=”value”,比如:

code/built_in_components/ng_style/app.ts

<div [style.background-color]="'yellow'"> Uses fixed yellow background
</div>

這個代碼的意思是設置div的背景色彩為yellow.
使用NgStyle的另外一種方式就是通過設置key-value對來設置多個CSS屬性的值,比如:

code/built_in_components/ng_style/app.ts

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> Uses fixed white text on blue background
</div>

:fa-info-circle:注意上面的表達式,color沒有使用引號,而background-color使用了引號,是由于,NgStyle的表達式是1個JavaScript的表達式,color是1個正常變量名字,但是background-color不是1個正常的變量名字,它代表background減去color,但是如果使用引號,就能夠了.

這里我們設置了color和background-color的值.

但是在我們的實際項目中,1般我們都會使用動態值而不是固定值.以下,我們定義兩個輸入框:

code/built_in_components/ng_style/app.ts

<div class="ui input">
    <input type="text" name="color" value="{{color}}" #colorinput>
  </div>
  <div class="ui input">
    <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
  </div>

然后,我們使用它們的值去設置3個元素的CSS屬性.
第1個,通過fontSize設置字體大小,以下:

code/built_in_components/ng_style/app.ts

<div>
  <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
  </span>
</div>

上面需要注意的是[style.font-size.px],它指明了單位.
.px說明了我們希望后面的數字表示的單位是px,固然也能夠使用[style.fontSize.em],[style.fontSize.%]

另外兩個元素使用#colorinput設置文本及背景色彩,以下:

code/built_in_components/ng_style/app.ts

<h4 class="ui horizontal divider header"> ngStyle with object property from variable
</h4>
<div>
  <span [ngStyle]="{color: colorinput.value}">
{{ colorinput.value }} text </span>
</div>
<h4 class="ui horizontal divider header"> style from variable
</h4>
<div [style.background-color]="colorinput.value" style="color: white;">
  {{ colorinput.value }} background
</div>

另外一種方式,當我們使用apply setting按鈕的時候,會調用apply去設置新的值:
code/built_in_components/ng_style/app.ts

apply(color, fontSize) {
    this.color = color;
    this.fontSize = fontSize;
}

NgClass

NgClass指令可使你能夠動態修改給定元素的CSS類.

:fa-info-circle:如果你使用過ng1,這個跟ng1是很類似的.

使用這個指令的1種方式就是傳遞1個對象常量,對象的key代表的是類名,對象的值是1個boolean值,代表該class是不是利用于指定的元素.

假定我們有1個bordered的CSS類,以下:
code/built_in_components/class/styles.css

.bordered {
border: 1px dashed black; background-color: #eee;
}

然后增加兩個div元素,1個具有bordered類,1個沒有:
code/built_in_components/ng_class/app.ts

<div [ngClass]="{bordered: false}">This is never bordered</div> 
<div [ngClass]="{bordered: true}">This is always bordered</div>

跟料想的1樣,渲染以下:

固然,更加有用的使用方式是使用動態綁定:

code/built_in_components/ng_class/app.ts

<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

另外,我們也能夠在我們的組件類中定義1個對象:

code/built_in_components/ng_class/app.ts

toggleBorder() {
    this.isBordered = !this.isBordered;
    this.classesObj = {
      bordered: this.isBordered
    };
}

然后直接使用這個對象:
code/built_in_components/ng_class/app.ts

<div [ngClass]="classesObj">
Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

:fa-info-circle:注意,當你的key中包括’-‘符號時,1定記得要加引號,不然是非法的.

我們也能夠是使用數組來表示哪些類需要添加到我們的元素上:

ode/built_in_components/ng_class/app.ts

<div class="base" [ngClass]="['blue', 'round']"> 
    This will always have a blue background and round corners
</div>

也能夠在我們的組件代碼中定義1個數組變量:

this.classList = ['blue', 'round'];

然后將其傳遞進去:
code/built_in_components/ng_class/app.ts

<div class="base" [ngClass]="classList">
This is {{ classList.indexOf('blue') > -1 ? "" : "NOT" }} blue and {{ classList.indexOf('round') > -1 ? "" : "NOT" }} round
</div>

注意,使用class屬性標注的類,始終會添加到元素上面,如:
code/built_in_components/ng_class/app.ts

<div class="base" [ngClass]="['blue', 'round']"> 
    This will always have a blue background and round corners
</div>

這個元素會有3個類,base,blue和round.

NgFor

這個指令的意思就是重復渲染1個DOM元素,并且每次傳遞不同的參數給它.

:fa-info-circle:這個指令與ng-repeat1樣.

語法為:*ngFor=”let item of items”

let item標識了每次接受元素的變量

items是來自組件的數組變量

假定我們有下面的數組:

this.cities = ['Miami', 'Sao Paulo', 'New York'];

然后,我們可以像下面這樣寫: