Angular 使用總結（一）組件之綁定屬性

 

生成組件：

ng generate component simple-test

使用模板表達式：

<div [xxx1]="xxx2"></div>

 

總結 xxx1:

1. 原生DOM元素本身的 Property

例如：

<div [id]="eleId"></div>

<input [(ngModel)]="eleId">
<div [id]="eleId"></div>

xxx1 就是 id了

 

插一句，經常得干的事，否則用不了 ngModel，趕緊寫上好了：

 

 

2. Angular 組件對外暴露的屬性

 例如：

[progress]="progress | number"

子組件暴露一個progress的屬性

<div class="parent">
    <div [style.width.%]="progress" class="child"></div>
</div>

  @Input()
  progress:number = 30;

父組件綁定到的屬性，這時候就是子組件暴露的屬性，xxx1 就是 progress

Progress:
<input [(ngModel)]="progress"><br><br>
<app-simple-test [progress]="progress | number"></app-simple-test>

效果：

 

 

3. 原生DOM元素的 Attribute Class Style

 例如：

<td [attr.colspan]="colSpan | number">111</td>

Attribute: [attr.xxx]

例子：

col span: <input [(ngModel)]="colSpan">
<table>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td [attr.colspan]="colSpan | number">111</td>
    </tr>
</table>

 

注意這句：

 

Class

用法1：[class.container]="isShow" 控制添加和刪除一個class

<input type="checkbox" [(ngModel)]="isShow">
<div [class.container]="isShow"></div>

 

用法2：[class]="xxx"，xxx 是以空格分隔的class名稱

<input [(ngModel)]="myClass">
<div [class]="myClass">Mt Test Div</div>

 

用法3：[class]="xxx"，xxx 是個數組

<div [class]="['aa','bb','cc']">Mt Test Div</div>

 

用法4：[class]="xxx"，xxx 是個對象

Style:

用法1：設置style上面某個屬性：

<div [style.width.%]="progress" class="child"></div>

 

用法2：設置style上面多個屬性：

TODO

 

4. 內置和自定義的 Attribute Directive

例如：

<div [ngClass]="myClass" [ngStyle]="myStyle">{{divContent}}</div>

<input [(ngModel)]="divContent">
<div [ngClass]="myClass" [ngStyle]="myStyle">{{divContent}}</div>

  myClass = {
    'aaa': true,
    'bbb': false,
    'ccc': true
  }

  myStyle = {
    width: '200px',
    height: '200px',
    backgroundColor: 'red'
  }

  divContent=""

 

效果：