angular的基本使用

1、在組件中的component.ts文件中可以直接定義屬性和它的值，在前端html頁面中，通過{{title}}的方式來引用

public title: any = 'username' // any 表示可以為任何類型的值  如果為其他的比如string/boolean則代表只能為這種類型值   

定義屬性的三種方式  1、public：公有屬性，可以在類里面使用，也可以在外面使用   //前面什么都不寫則默認為public

                                   2、protected：保護類型，只有在當前類和它的子類中才可以訪問

　　　　　　　　　　3、private：私有屬性，只有在當前類中才可以使用

在構造函數中，如果需要改變或者引用該數據時，通過this.title即可獲取

2、當需要給某個標簽的屬性賦值為定義的屬性的值，通過[屬性名]=屬性值的方式來   vue則為 :屬性名=屬性值

 

 <h3 [屬性名]="title">angular定義屬性名</h3>

 

3、解析html代碼

　　<div [innderHTML]="content"></div>   vue則為v-html=""

4、for循環    vue循環-v-for

<ul>
  <li *ngFor="let item of list;let key = index"> // key為索引 {{item}} ---{{key}} </li>
</ul>

5、引入靜態資源中的圖片

　　<img  src="assets/imgurl" />既可獲取

6、*ngIf 等同與v-if   if條件判斷      angular沒有else

7、switch的使用

<span [ngSwitch]="switchNumber">
  <p *ngSwitchCase="1">收獲1</p>
  <p *ngSwitchCase="2">收獲2</p>
  <p *ngSwitchCase="3">收獲3</p>
  <p *ngSwitchCase="4">收獲4</p>
</span>

8、動態定義class

<span [ngClass]="{'red':true,'blue':false}">1111111111</span>
<span [ngClass]="{'red':false,'blue':true}">1111111111</span>

9、動態定義style

<span [ngStyle]="{'color':'yellow'}">3333333</span>

10、方法的調用

<button (click)="run()">點擊執行事件</button>  將方法定義在ts文件中，即可直接調用

11、獲取DOM節點並操作它的方式

// 監聽事件的地方
<div (click)="getDom($event)">
  66666666666666
</div>

// 執行事件的地方，
 getDom(e) {  const dom = e.target; dom.style.color = 'red'; }

12、MVVM雙向數據綁定（只針對表單）  首先需要在該文件下引入FormModule，並且在import中聲明一次。

 

 

<input type="text" [(ngModel)]="keywords">   此時即可實現雙向數據綁定 {{keywords}}