Angular 7 自學總結 1

2021-09-13 15:21:26 字數 2657 閱讀 7888

個人理解angular

建立乙個專案

專案目錄結構分析

主要需要知道的檔案:

建立元件

如何在其他頁面復用元件?

在新建立的元件中的news.component.ts檔案中,有乙個selector屬性就是名字,如果需要呼叫只需要在其他頁面中寫入 即可,這樣頁面**量少、**復用率高。

@component()
定義資料

定義資料的幾種方式:

1.定義基本資料

title ="我是新聞元件";

public title ="我是新聞元件";

public title:string ="我是新聞元件"; //最標準的定義方式

public message:any;//定義空資料

2.定義物件

public userinfo:object=;
3.定義陣列的幾種方式

//普通陣列

arr=[a,b,c];

public arr:arr =['111','222','333'];

public list:array=[123,321,456,654];//如果<>裡面是number則陣列必須是number

//物件陣列

public userlist:array=[,,

];//複雜陣列

public cars:array=[,,

]}, ,,]

}, ,,]

}];

資料繫結 (1)
}}}

}}張三1+2=}

}

資料繫結 (2)

1.引入

html:

ts:

public imgsrc:any="";
2.迴圈資料顯示資料的索引(key)

html:

ts:

public list:array=[

,,];

3.條件判斷語句 *ngif

html:

;

ts:

public list:array=[

,,];

4.條件判斷語句 ngswitch

html:

已經支付

已經支付並確認訂單

已經發貨

已經收貨

無效訂單

ts:

public orderstatus:number=5;//1表示已經支付 2表示已經支付並確認訂單 3表示已經發貨 4表示收貨 5表示無效
5.屬性ngclass ngstyle

html:

111111111111111111111

222222222222222222222

css:

.red

.pink

.blue

ts:

public flag:boolean=true;
6.迴圈陣列讓資料變成紅粉藍

html:

html:

我是乙個p標籤

我是乙個p標籤

我是乙個p標籤

7.管道

html:

日期:}

ts:

public today:any= new date();
8.事件

html:

}執行事件

執行事件,獲取資料

執行事件,改變資料

ts:

public title:string="我是乙個標題";

run(e)

getdata)

updatedata()

9.表單事件 事件物件

html:

ts:

keydown(e)else

}keyup(e)

}

10.雙向資料繫結 mvvm

html:

}

改變keywords的值

獲取keywords的值

ts:

public keywords:any="我是keywords";

changekeywords()

getkeywords()

Angular 7 學習資料 (1)

angular 是乙個用 html 和 typescript 構建客戶端應用的平台與框架。angular 本身就是用 typescript 寫成的。它將核心功能和可選功能作為一組 typescript 庫進行實現,你可以把它們匯入你的應用中。angular 的基本構造塊是 ngmodule,它為元件...

Angular7上手體驗

檢視當前你的node版本可以在cmd中輸入 開發工具強烈推薦 用cli命令建立 ng7demo 這裡前面我用ng7 demo的時候報錯 應該是不能用下劃線 這裡誇獎下,7加入了cli prompts 建立的時候可以選是否啟用router 及 css用scss,sass等 暫時只有這2個prompts...

Angular7需要的基本操作

angular4和vue2是越來越像了 全域性安裝angular cli 腳手架工具 使用npm命令安裝 npm install g angular cli 安裝cnpm 國內直接裝經常會出問題,所以設定為 映象位址會更好。npm install g cnpm registry 安裝angular ...