一详瑞、angular2基礎(chǔ)使用
1榨乎、安裝angular
npm i @angular/cli -g
安裝完成提示：
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
是否聯(lián)系A(chǔ)ngular團(tuán)隊(duì)--N
2尼桶、創(chuàng)建項(xiàng)目
ng new myapp --skip-install
? Would you like to add Angular routing? No
是否要添加路由未状？
? Which stylesheet format would you like to use? CSS
要使用哪種樣式晶框？
- css
- sass
- scss
- less
- Stylus
3闰蚕、使用yarn下載包
npm i yarn -g
切換路徑安裝：
yarn install
4栈拖、運(yùn)行項(xiàng)目
ng serve
5、關(guān)閉tslint.json（代碼檢測(cè)）
"defaultSeverity": "none"
6没陡、新建組件
ng generate component 組件名
- 駝峰命名：postItem
在post-item組件的類(lèi)文件（post-item.component.ts）中selector（組件的選擇器）中的：“app-post-item”就是這個(gè)heroes組件的元素選擇器涩哟，所以顯示heroes組件，將<app-post-item> 元素添加到appComponent的模板文件（app.component.html）中就可以了盼玄。
- 生成文件名：post-item
7贴彼、事件綁定(事件名)
<button (click)="showDetail(可選)">詳情</button>
showDetails(可選) {
console.log('點(diǎn)擊了',可選)
}
8、值綁定 [ value ] = ""
[屬性] = ‘值’
<input type="text" [value]="inputvalue">
9埃儿、 結(jié)構(gòu)型指令
結(jié)構(gòu)型指令的職責(zé)是 HTML 布局器仗。 它們塑造或重塑 DOM 的結(jié)構(gòu)，比如添加童番、移除或維護(hù)這些元素精钮。
星號(hào)（*ng）被放在指令的屬性名之前。
- 條件指令
<div *ngIf="hero" >{{hero.name}}</div>
- 循環(huán)指令
<div *ngFor="let item of 數(shù)組></div>
10剃斧、輸入框雙向綁定
-
綁定原生事件（$event）
(keyup)="inputChangeHander($event)"
-
接收
inputChangeHander(e) { const item = e.target.value this.inputvalue = item }
11轨香、組件之間通訊（傳值）
-
父組件傳子組件
-
父組件html
<子組件 [屬性]="值"/>
-
子組件ts
引入：
import { Input } from '@angular/core';輸入：
export class ListItemComponent implements OnInit { // @Input() 屬性名 獲取父組件的值 @Input() listitem constructor() { } ngOnInit(): void { } }
-
父?jìng)髯?/div>
-
子傳父
-
子組件html
(事件) = "事件名.emit(可選)"
<button (click)="showDetail.emit(item)">詳情</button> -
子組件ts
引入：
import { Output, EventEmitter } from '@angular/core';輸出：
@Output() 事件名 = new EventEmitter();
子組件輸出事件-
父組件html
<子組件 (子組件事件名) = "事件名1($event)">
-
父組件ts（執(zhí)行事件1）
事件1(event){ console.log(event) //event為傳值的內(nèi)容 }
-
接收事件傳值
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)买决，“玉大人沛婴，你說(shuō)我怎么就攤上這事《匠啵” “怎么了嘁灯？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)躲舌。 經(jīng)常有香客問(wèn)我丑婿，道長(zhǎng)，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任羹奉，我火速辦了婚禮秒旋，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘诀拭。我一直安慰自己迁筛，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布耕挨。 她就那樣靜靜地躺著细卧，像睡著了一般。 火紅的嫁衣襯著肌膚如雪筒占。 梳的紋絲不亂的頭發(fā)上贪庙，一...
- 那天，我揣著相機(jī)與錄音赋铝，去河邊找鬼。 笑死沽瘦，一個(gè)胖子當(dāng)著我的面吹牛革骨，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播析恋，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼良哲，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了助隧？” 一聲冷哼從身側(cè)響起筑凫，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎并村，沒(méi)想到半個(gè)月后巍实，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡哩牍，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年棚潦，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膝昆。...
- 正文 年R本政府宣布收叶，位于F島的核電站骄呼，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谒麦，卻給世界環(huán)境...
- 文/蒙蒙 一俄讹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧绕德，春花似錦患膛、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至臣咖，卻和暖如春跃捣，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背夺蛇。 一陣腳步聲響...
- 正文 我出身青樓娶聘，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親甚脉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子丸升，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 第一節(jié)：初識(shí)Angular-CLI第二節(jié)：登錄組件的構(gòu)建第三節(jié)：建立一個(gè)待辦事項(xiàng)應(yīng)用第四節(jié)：進(jìn)化！模塊化你的應(yīng)用第...
- core package 概要：Core是所有其他包的基礎(chǔ)包.它提供了大部分功能包括metadata牺氨，templa...
- 一.課程簡(jiǎn)介 (注意:這里的AngularJS指的是2.0以下的版本) AngularJS的優(yōu)點(diǎn): 模板功能強(qiáng)大豐...
- Angular介紹 Angular安裝狡耻、創(chuàng)建項(xiàng)目、目錄結(jié)構(gòu)猴凹、組件夷狰、服務(wù) 創(chuàng)建組件、綁定數(shù)據(jù)郊霎、綁定屬性孵淘、數(shù)據(jù)循環(huán)、條...
