初認識Angular----データバインディング及びイベントバインディング等(一)

1、共通の一方向データバインディング
(1)一方向:ビューへのデータバインド{}}およびパイプオペレータ

xx.component.html:


    
            ---           
    {{title}}
    
    ：{{hero.name}}
    
      ----{{obj | json}}
    
          ---Birthdate: {{ data1 | date:'longDate'}}
    
     ---Title through a pipe chain: {{title1 | uppercase | lowercase}}


xx.component.ts:

title = '         ';
hero = {name: '   ', age: 6};
obj = {first: 'one',second: 'two'};
data1 = new Date();
title1 = 'abCD';

(2)一方向データをビューにバインド[]='expression'

xx.component.html:

          isUnchanged []='expression'---           
changed
{{message}}

xx.component.ts:

isUnchanged = false;
message = '      ';

上記の例では[hidden]はspanの属性であり、グローバル属性(attribute)でもあることに注意してください.通常、カスタムコンポーネントを含む属性バインドもこの方法で使用されます.
angularテンプレートでは、バックグラウンドのプライベート属性やメソッドにアクセスできません.
データからビューへの一方向バインドを理解することに注意してください.つまり、データが変化すると、ビュー内の関連バインドも変化します.ビューが変化すると、inputなどの値が入力されますが、tsファイル内のデータソースは変化しません.双方向データバインドはビューが変化し、データソースも変化します.
2、双方向バインド
(1)[(ngModel)]

xx.component.html:


{{someText}}


xx.component.ts:

pinked = '';
setUppercaseName(value) {
  this.pinked =  value.toUpperCase().toString();
}
someText = '          ';

注意:ngModelを使用する場合はFormsModuleが必要で、Angularモジュールのimportsリストに追加します.適切な値を書かない限り、[(ngModel)]をフォームクラス以外のオリジナル要素またはサードパーティカスタムコンポーネントに使用することはできません.
[(ngModel)]構文では、データバインド属性のみ設定できます.もっとやるか、違うことをするなら、その展開形式を書くこともできます.
3、スタイルバインド
(1)[style.属性名]=「'属性名対応の設定」

(2)[style.属性名]=「三目演算子式」

Big

(3)style排他バインド[ngStyle]="ある変数名"

xx.component.html：

 
    This div is initially italic, normal weight, and extra large (24px).


       

xx.component.ts：

isUnchanged = true;
canSave = true;
isSpecial = true;
currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };

4、cssクラスバインド
(1)[class.xxx]=[isxxx]および[class]=[変数名]---クラス名の上書きが発生します

xx.component.html:

css   [class.xxx]="isxxx"：              
The class binding is special

BadCurly

xx.component.ts:

isSpecial = true;

badCurly = 'bad';

xx.component.css:

.special{
  background: #ffff99;
  font-weight: bolder;
}

.bad{
  background: #ff0000;
  color:#ffffff;
}

(2)cssクラス固有バインディング:ngClass---複数のクラスを同時に追加または削除できます.オブジェクトのkey値はcssクラス名で、valueはブールタイプで、スタイルを適用するかどうかを示します.

xx.component.html:

  css   ngClass：            
This div



           


 
          


xx.component.ts:

isSelected: boolean;
isUnchanged = false;
canSave = true;
isSpecial = true;
currentClasses =  {
  'saveable': this.canSave,
  'modified': !this.isUnchanged,
  'special':  this.isSpecial
};

xx.component.css:

.selected { border: 5px solid green; }
.saveable{
  color:greenyellow;
}
.modified{
  color:pink;
}
.special{
  background: #ffff99;
  font-weight: bolder;
}

5、例外のattributeバインド[attr.属性名]='式'
ラベルには純粋なattributeしかありませんcolspanなど

xx.component.html:


   
One-Two
    
Five
Six

 {{actionName}} with Aria

xx.component.ts:

actionName = '  ' ;

6、イベントバインド

xx.component.html:
   、           ()="  （） expression"
   property       [(ngModule)]='xxx'

xx.component.html:

{{isDemoExpand?'   ':'   '}}

xx.component.ts:

@Input() hasDemo = true;
@Input() isDemoExpand = false;
 toggleExpand() {
    if ( !this.hasDemo ) return;
   this.isDemoExpand = !this.isDemoExpand;
   this.isDemoExpandChange.emit(this.isDemoExpand);
  }