Angular 2命令-汎用命令

AngularはCommonModuleモジュールに汎用命令を含め、これらの汎用命令を使用する必要がある場合はモジュールにインポートする必要があります.BrowserModuleモジュールには既にCommonModuleモジュールが含まれているので、BrowserModuleを導入すると使用できます.
NgClass
NgClassコマンドを使用すると、複数のクラスを同時に追加または削除できます.NgClassはCSSクラス名:valueのような有形のオブジェクトをバインドし、valueの値はブール型の値であり、valueの値がtrueの場合、対応するタイプのテンプレート要素を追加し、逆に削除します.

//    
  <i [ngClass]="{green: true}">i>
//  
  <i [ngClass]="{green: isAddr, red: !isAddr}">i>

NgStyle
NgStyleはCSS属性名:valueのような有形のオブジェクトをバインドし、valueは特定のcssスタイルです.

<div [ngStyle]="{'background-color':'green'}"><div>
//    
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"><div>

NgIf
ブール型の式をバインドすることを指定します.式がtrueを返すと、DOMツリーノードに要素とそのサブ要素を追加し、逆に削除できます.

<i *ngIf="nameTip">i>

NgSwitch、NgSwitchCase、NgSwitchDefault
NgSwitch:戻り制御条件にバインドされた値式NgSwitchCase:戻り一致条件にバインドされた値式NgSwitchDefault:デフォルト要素をマークするプロパティ

<span [ngSwitch]="favoriteHero">
  <p *ngSwitchCase="true">
    Excellent choice!
  p>
  <p *ngSwitchCase="false">
    No movie, sorry!
  p>
  <p *ngSwitchDefault>
    Please enter your favorite hero.
  p>
span>

NgFor
NgFor命令は、データを示すためにいくつかの操作を繰り返すことができる.NgForコマンドは、オプションのindexインデックスをサポートします.

<ul>
    <li *ngFor="let fruit of fruitsList,let i=index">{{fruit}}li>
ul>

いくつかの複雑な項目を含むリストでは、変更するたびに関連するDOM操作が多く発生します.ここでは、NgForコマンドを使用するとパフォーマンスが低下します.サーバ上でデータを再プルすると、プルされたデータには以前に表示されたデータが多く含まれる可能性がありますが、Angularは、データ更新前に表示されたリストデータ、表示されていないリストデータ、古いリストのDOM要素のみを消去し、新しいリストデータでDOM要素を埋め込んで新しいリストを再構築することができます.この場合、このような繰り返しレンダリングを回避するには、トレース関数を使用します.

//    
trackByFruits(index:number,fruit:Fruit){
    return fruit.id;
}


<ul>
    <li *ngFor="let fruit of fruitsList,trackBy:trackByFruits">{{fruit}}li>
ul>

NgTemplateOutlet
NgTemplateOutletコマンドは、テンプレートに埋め込みビューを作成します.NgTemplateOutletを使用するには、命令にキューテンプレート要素の参照をバインドする必要があります.つまり、NgTemplateOutlet命令を使用する場合は、コンポーネントにテンプレート要素の参照を宣言し、この変数を入力属性として命令にバインドする必要があります.NgTemplateOutlet指定の基本的な使い方:

<template [ngTemplateOutlet]="templateRefExpression"><template>

さらに、挿入された埋め込みビューにコンテキストオブジェクトをバインドすることもできます.NgTemplateOutlet命令にはngOutletContext属性があり、ngOutletContext属性に入力変数をバインドすることで、現在のテンプレートで取得したコンテキストオブジェクトを挿入された埋め込みビューにバインドできます.

<template [ngTemplateOutlet]="templateRefExpression" ngOutletContext="objectExpression"><template>

import {Component} from "@angular/core";
@Component({
  selector: 'ng-template-outlet-example',
  template: `
    <template #foo let-name="name" let-skills="skills">
       <h4>{{name}}h4>
       <ul>
          <li *ngFor="let s of skills">{{s}}li>
       ul>
    template>
    <div [ngTemplateOutlet]="foo"
           [ngOutletContext]="msg1">       
    div>
    <div [ngTemplateOutlet]="foo"
          [ngOutletContext]="msg2">
    div>
`
})
export class NgTemplateOutletExample {
  msg1;
  msg2;
  constructor() {
    this.msg1 = {
      name: "Zhentian",
      skills: ["JS", "Angular"]
    };
    this.msg2 = {
      name: "Wan",
      skills: ["JSX", "React"]
    };
  }
}

NgPlural、NgPluralCase
NgPlural、NgPluralCaseは、組み合わせて使用するコマンドのセットです.NgPluralは国際化命令であり、その役割はNgSwitch命令と類似しており、NgSwitch命令の一種の変種と見なすことができ、NgPluralCase命令はNgSwitchCaseクラスよりも理解することができる.NgpluralとNgSwitchの命令の違いは、NgPlural命令を使用するには、NgLocalizationクラスを継承しgetPluralCategory()メソッドを実装する必要があります.このメソッドでは、特定の分類要件に基づいて、ある範囲の値に名前を付けた分類を分類し、分類名を返します.戻った分類は、[ngPlurral]バインド値を一致させることができます.値がこの分類の定義範囲に属する場合、一致は成功します.したがって、NgSwitch命令は正確なマッチングしかできないが、NgPlural命令は正確なマッチングに加えて範囲マッチングも可能である.

import {Component} from "@angular/core";


@Component({
  selector:'ng-plural',
  template:`
      <p>{{value}}p>
      <button (click)="inc()">  button>
      <div [ngPlural]="value">
          <template ngPluralCase="=0">0template>
          <template ngPluralCase="=1">1template>
          <template ngPluralCase="other">  template>
      div>
`
})
export class NgPluralExample{
  value:any="init";
  inc(){
    this.value=this.value==='init'?0:this.value+1;
  }
}