Web前端三大框架_angular.js 6.0（一）需要視頻教程，看頭像昵稱處一、Angular 6.0 1.1樣式 html中引入樣式：內嵌式，外鏈式，行內式。 ng6中組件引入樣式的方式也有三種：外鏈式 ng6中，已經將css預編譯語言配置出來了，因此我們可以直接使用他們在組件註解類中 ...

Web前端三大框架_angular.js 6.0（一）需要視頻教程，看頭像昵稱處

一、Angular 6.0

1.1樣式

html中引入樣式：內嵌式，外鏈式，行內式。

ng6中組件引入樣式的方式也有三種：

外鏈式

ng6中，已經將css預編譯語言配置出來了，因此我們可以直接使用他們

在組件註解類中，通過styleUrls引入樣式文件，是一個數組，可以引入多個文件

如果引入的是.css文件，就是css語法

如果引入的是.less文件，就是less語法

如果引入的是.scss文件，就是.scss語法

...

不論是哪種文件，我們都要遵守組件命名規範，名稱.componnet.拓展

內嵌式

在組件註解類中，通過styles引入樣式，是一個數組，可以定義多塊樣式

行內式

我們可以通過style屬性定義行內式字元串

註意：內嵌式樣式styles和外鏈式樣式styleUrls，不能同時使用

shadow DOM樣式

ng6實現的樣式是一個shadow DOM樣式，組件內部的樣式，是不會應用給組件外部的元素的

1 // 外鏈式樣式

2 styleUrls: ['./app.component.less', './app.component.scss', './app.component.css'],

3 // 內嵌式樣式

4 styles: [

5 `

6 h1 {

7 color: pink;

8 }

9 `

10 ]

1.2動態設置樣式

ng6中，我們也可以動態的設置樣式，有兩種語法，

第一種 [style.樣式名稱]=”樣式值”

每次只能設置一個樣式，為了避免css註入

第二種 [ngStyle]=”{}”

這裡的ngStyle是一個指令

每次可以添加多個樣式，對象中屬性名稱要駝峰式命名

兩種方式屬性值都是js環境，因此可以使用變數，字元串要加引號

我們可以在組件類中，定義這些數據

註意：兩種方式都是用了中括弧，因此中括弧是ng6中的一個語法糖，作用是用來動態設置屬性，元素的所有屬性都可以使用[]語法糖（包括後面講解的指令）

1 template: `

2 <h1 [title]="title" [style.color]="'red'" [style.background]="color" [ngStyle]="{

3 fontSize: '100px',

4 height: '200px'

5 }">愛創課堂</h1>

6 <h2>{{title}} {{color.toUpperCase()}}</h2>

7 `,

1.3插值

想在模板中的元素內使用組件中的數據，我們需要一個js環境，可以通過插值實現

語法 {{}}

插值語法提供了js環境，因此可以使用js表達式

1.4事件

vue中：@click=”fn()”

react中：onClick=”fn()”

ng6中綁定事件，我們通過圓括弧語法糖綁定

(click)=”fn()”

事件回調函數定義在組件類中

預設沒有參數，使用什麼參數可以傳遞什麼參數，使用事件對象，要傳遞$event

作用域是組件實例化對象

作用域是無法改變的，想改變作用域，我們可以將回調函數嵌入在一個函數中，綁定這個新函數，在執行時候，改變原來回調函數作用域。

ng6中，事件是直接綁定給元素的，沒有實現事件委托模式，事件對象是一個源生的事件對象，ng6並沒有處理

1 template: `

2 <h1 [title]="title" [style.color]="'red'" (click)="clickDemo($event)">愛創課堂</h1>

3 <h2>{{title}} {{color.toUpperCase()}}</h2>

4 `,

1.5臨時模板變數

ng6允許我們在模板中定義臨時變數,用#語法糖

語法 #變數名稱

我們直接在元素上添加#屬性，就可以定義變數了

變數可以賦值（指令）

如果沒有賦值，則代表該元素（是源生的DOM元素，要使用源生API操作），我們可以通過該變數訪問這個元素

臨時模板變數只是在模板中存在，一旦模板渲染完成，臨時模板變數就被銷毀，所以我們不能在組件中使用

想在組件中查看該變數，我們可以將其傳遞給事件回調函數存儲

1.6事件修飾符

我們可以為鍵盤事件定義修飾符，來方便為某個按鍵綁定事件

語法事件名稱.修飾符=”事件回調函數()”

此時獲取輸入框的內容，有兩種方式

第一種，通過事件對象：e.target.value獲取

第二種，通過臨時模板變數: inp.value獲取

1.7 change事件

對於輸入框元素，我們可以綁定change事件，但是綁定的一個源生的change事件

就有瀏覽器相容性問題了，當觸發內容更新的時候，會執行，每個瀏覽器是不一樣的

例如：chrome認為輸入框失去焦點時候才會觸發change事件，與blur事件類似了

1 template: `

2 <h1 #titleDOM [title]="title" [style.color]="'red'" (click)="clickDemo($event, titleDOM)">愛創課堂</h1>

3 <h2 [title]="titleDOM.innerHTML" [style.color]="titleDOM.style.color">{{title}} {{color.toUpperCase()}}</h2>

4 `,

1.8自定義組件

有時候我們需要更多的組件，所以我們要自定義組件，ng6為了簡化我們定義組件，提供了指令，可以通過ng指令，快速創建組件

ng g component demo

註意：一定要進入項目的根目錄再執行執行。

此時創建了四個文件，並且新增了一個文件

四個新增文件：.css, .html, .spec.ts, .ts

修改了app.module.ts文件

全局聲明瞭組件，所以我們就可以在各個位置使用組件了

圖片1.png

圖片2.png

組件是完整獨立的，彼此之間數據是不會共用的。

1 import { Component, OnInit } from '@angular/core';

3 @Component({

4 selector: 'app-demo',

5 templateUrl: './demo.component.html',

6 styleUrls: ['./demo.component.css']

7 })

8 export class DemoComponent implements OnInit {

10 constructor() { }

12 ngOnInit() {

13 }

15 }

1.9組件間通信

組件是完整獨立的，彼此之間數據是不會共用的。為了實現數據的共用，我們要實現組件間通信

所以組件之間通信，就是實現組件之間傳遞數據的。

通常有兩個方向

父組件向子組件通信

子組件向父組件通信

ng6為了實現組件間通信，提供了吞吐器技術。Input， Ouput

1.9.1父組件向子組件通信

實現父組件到子組件通信，我們需要六步

第一步為子組件添加屬性數據

如果數據中數據變數，我們可以使用[]語法糖

第二步定義數據模型類（如果數據比較複雜，我們要定義數據模型）

通常我們要創建文件，表示數據模型， .model.ts, 模型是一個類，所以有時候也可以將文件定義成.ts

創建類: ng g class 模型類文件名稱

我們創建模型類文件，要添加目錄

第三步子組件中引入模型類

第四步子組件中，引入吞吐器Input。

第五步用吞吐器接收數據，有兩種方式

第一種，在組件類中，通過Input吞吐器接收,通過註解的形式接收

語法 @Input() 屬性名: 模型類

第二種，在Component註解類中，通過inputs屬性接收數據,分成兩步

第一步定義接收數據的屬性

inputs: []

每個成員代表一個屬性名稱

第二步在組件中，定義接收數據的數據結構

屬性名: 模型類

第六步使用數據

接收的數據會存儲在組件實例化對象上，因此我們可以在組件中使用，也可以在模板中使用

1 // 4 引入吞吐器

2 import { Component, OnInit, Input } from '@angular/core';

3 // 3 引入模型類

4 import { Demo } from '../models/demo';

5 // console.log(Demo)

7 @Component({

8 selector: 'app-inputchild',

9 templateUrl: './inputchild.component.html',

10 styleUrls: ['./inputchild.component.css'],

11 // 第二種接收數據的方式

12 inputs: ['data']

13 })

14 export class InputchildComponent implements OnInit {

15 // 5 接收數據

16 // @Input() data:Demo;

17 // 數據格式

18 data: Demo;

19 constructor() {

20 // 6 使用數據

21 // console.log(this)

22 }

24 ngOnInit() {

25 }

27 }

下午複習

樣式

外鏈式：styleUrls: []

內嵌式：styles: []

行內式：style=””

動態設置樣式

[style.color]=””

[ngStyle]=”{}”

插值： {{}}

DOM事件： (click)=”fn($event)”

事件修飾符 (keyup.enter)=””

change=””

臨時模板變數 #demo

組件 ng g component demo

父組件到子組件通信 1 屬性， 2 model， 3 引入model，4 Input， 5 註冊數據， 6 使用

5 註冊數據

1 @Input() key: Data;

2 inputs: [] key: Data;

1.9.2父組件向子組件通信

ng6也是基於事件機制實現子組件向父組件通信的，對於子組件來說，要將數據傳遞（吐）給父組件，就要使用Output吞吐器。

實現子組件向父組件通信分成六步

第一步在父組件中，為子組件註冊自定義事件
註冊自定義事件要使用()語法糖，想傳遞數據，我們要傳遞$event參數

第二步在子組件中，引入吞吐器Ouput

第三步在子組件中，引入自定義事件類EventEmitter

第四步在子組件中，通過吞吐器，實例化事件對象，有兩種方式

第一種組件類中，通過吞吐器實例化事件對象

@Ouput() 屬性事件對象 = new EventEmitter()

第二種分成兩步

註解中，註冊屬性事件對象

outputs: []

組件類中，實例化事件對象

屬性事件對象 = new EventEmitter()

第五步通過屬性事件對象的emit方法，發佈消息，參數就是傳遞給父組件的數據

第六步在父組件中，接收數據並使用數據。

1 // 2 引入Output， 3 引入EventEmitter

2 import { Component, OnInit, Output, EventEmitter } from '@angular/core';

4 @Component({

5 selector: 'app-outputchild',

6 templateUrl: './outputchild.component.html',

7 styleUrls: ['./outputchild.component.css'],

8 // 第一步註冊屬性事件對象

9 outputs: ['sendMessage']

10 })

11 export class OutputchildComponent implements OnInit {

12 // 4 實例化消息對象

13 // @Output() sendMessage = new EventEmitter();

14 // 第二步實例化

15 sendMessage = new EventEmitter();

16 // 點擊按鈕的時候，發佈消息

17 changeColor() {

18 // 5 發佈消息

19 // console.log(this)

20 this.sendMessage.emit({

21 // color: 'red'

22 color: 'green'

23 })

24 }

25 constructor() { }

27 ngOnInit() {

28 }

30 }

1.10模板指令

有時候我們要動態創建元素，此時我們可以使用模板指令

在ng6中，指令都是駝峰式命名，例如ngStyle，並且指令的屬性值都是字元串，想變成js環境，通常要使用語法糖，例如[]

模板指令是控制元素的創建，想控制多個兄弟元素的創建，我們要使用模板組件

1.10.1模板組件

vue中，模板元素是template，

但是在ng6中，模板組件叫ng-template組件

當我們使用模板指令，控制元素的創建的時候，通常來說

如果是普通元素，那麼我們要使用*語法糖

如果是ng-template模板組件，那麼我們要使用[]語法糖

1.10.2 ngIf模板指令

跟vue中的v-if指令一樣，控制元素是否創建的

當為普通元素添加的時候，例如div，h1等，要使用*語法糖

當為ng-template組件添加的時候，要使用[]語法糖

如果ngIf屬性值為true，則創建這個元素

如果ngIf屬性值為false，則刪除這個元素

1.10.3多分支條件模板執行

vue中通過v-if， v-else， v-else-if指令定義

ng6模擬了switch語句，實現多分支條件模板指令

switch () {

case:

default:

}

ng6模擬switch語句，提供了一組多分支條件模板指令，ngSwitch, ngSwitchCase, ngSwitchDefault

ngSwitch作用是設置條件的，不控制元素是否創建的，因此不是模板指令，所有元素都使用[]語法糖

ngSwitchCase, ngSwitchDefault可以控制元素是否創建，因此對於普通元素來說，我們要使用*語法糖

ngSwitchCase表示條件，使用了*語法糖，屬性值就是js環境，字元串加引號

ngSwitchDefault表示預設條件，不需要設置屬性值

1 <button (click)="toggle()">顯隱元素</button>

2

3 <h1 *ngIf="isCreate">愛創課堂</h1>

4

5 <ng-template [ngIf]="isCreate">

6 <h1>愛創課堂</h1>

7 <h2>專業前端培訓學校</h2>

8 </ng-template>

9

10 <hr>

11 <button (click)="changePage('home')">顯示home頁面</button>

12 <button (click)="changePage('list')">顯示list頁面</button>

13 <button (click)="changePage('defailt')">顯示detail頁面</button>

14

15 <div [ngSwitch]="page">

16 <h1 *ngSwitchCase="'home'">home page</h1>

17 <h1 *ngSwitchCase="demo">list page</h1>

18 <h1 *ngSwitchDefault>detail page</h1>

19 </div>

1.10.4迴圈模板指令

vue中，我們用v-for指令，定義迴圈模板指令

ng6中，我們用ngFor定義迴圈模板指令

在普通元素上使用，要使用*語法糖

語法 *ngFor=”let item of data”

let, of 是關鍵字

item 表示迴圈變數（表示數組中的每個成員）

data就是我們要遍歷的數據

在ng6中，迴圈變數不僅僅只有item，還有

index 表示索引值

first 表示是否是第一個

last 表示是否是最後一個

even 表示是否是偶數次

odd 表示是否是奇數次

註意：電腦是從0開始計數的，人眼是從1開始計數的，所以

電腦中的奇數，就是人眼看到的偶數

電腦中的偶數，就是人眼看到的奇數

除了item模板變數之外，其他的模板變數，都要先定義再使用，通過as語法定義

例如 index as $index

我們此時可以使用$index了

這些迴圈變數是臨時的，一旦迴圈結束，這些變數就被銷毀了，所以我們就無法訪問。

ngFor指令控制多個兄弟元素，我們也可以使用ng-template組件，但是語法變數

通過ngFor聲明迴圈指令

通過ngForOf綁定迴圈數據

通過let-item定義成員值

1

2 <ul>

3

4

5 <li *ngFor="let item of colors; index as index; first as $first; last as $last; even as e; odd as o" [style.background]="e ? '#eee' : ''" >{{index}}-{{item}}-{{$first}}-{{$last}}-{{e}}-{{o}}</li>

6 </ul>

7 <h1>迴圈外部{{index}}</h1>

8 <ng-template ngFor [ngForOf]="colors" let-item>

9 <h1>h1 {{item}}</h1>

10 <h2>h2 {{item}}</h2>

11 </ng-template>

1.11自定義指令

在ng6中有三類指令

第一類就是組件（組件的本質也是指令）

第二類是屬性型指令，例如ngStyle， ngClass

控制元素行為樣式的

ngClass跟vue中的:class類似

屬性值可以是字元串

屬性值可以是對象

屬性值可以是數組

第三類是結構型指令，例如：ngFor， ngIf, ngSwitchCase, ngSwitchDefault...

就是模板指令，控制元素創建的

結構型指令與屬性型指令的區別

屬性型指令控制樣式行為，不能控制元素是否創建，而結構型指令則控制元素是否創建

雖然所有指令的屬性值預設都是字元串，但是要變成js環境，應用的語法糖是不同的

屬性型指令使用[]語法糖

結構型指令對於普通元素使用*語法糖，對於ng-template組件使用[]語法糖

內置的指令是有限的，為了提供更多的功能，我們要自定義指令

1.11.1自定義指令

我們通過ng指令來創建

ng g directive demo

此時創建了兩個文件，並且修改了全局模塊配置文件

圖片3.png

自定義指令在全局聲明瞭。因此我們可以在任何位置直接使用該指令

圖片4.png

指令與組件的區別

1 文件

組件有四類文件：.html, .css, .ts, .spec.ts,

指令只有.ts, .spec.ts文件，沒有模板和樣式

2 選擇器

組件的預設選擇器是自定義元素名稱選擇器

指令的預設選擇器是自定義屬性選擇器

3 註解

組件的組件類是Component，可以註入樣式和模板

指令的註解類是Directive

4 介面

組件實現了OnInit介面

指令沒有實現OnInit介面

組件終歸是指令，指令更是指令了

組件可以實現通信，指令也可以實現通信

Web前端三大框架_angular.js 6.0（二）

一、Angular 6.0

1.1樣式

1.2動態設置樣式

1.3插值

1.4事件

1.5臨時模板變數

1.6事件修飾符

1.7 change事件

1.8自定義組件

1.9組件間通信

1.9.1父組件向子組件通信

下午複習

1.9.2父組件向子組件通信

1.10模板指令

1.10.1模板組件

1.10.2 ngIf模板指令

1.10.3多分支條件模板執行

1.10.4迴圈模板指令

1.11自定義指令

1.11.1自定義指令