久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

## 模擬數(shù)據(jù) 我們?cè)赻src/assets`文件夾中建立如下一個(gè)`teacher-all.json`文件，以模擬一個(gè)在良好網(wǎng)絡(luò)環(huán)境下的后臺(tái)回傳數(shù)據(jù)。  ```json [ { "id": 1, "name": "張三", "username": "zhangsan", "email": "zhangsan@yunzhiclub.com", "sex": true }, { "id": 2, "name": "李四", "username": "lisi", "email": "lisi@yunzhiclub.com", "sex": false } ] ``` * **注意** JSON文件的格式更加嚴(yán)格，每個(gè)屬性都需要使用`""`包裹。 ### karma Angular的單元測(cè)試使用了強(qiáng)大的`karma`，在當(dāng)前Angular版本`ng t`的情況下，HttpClient若要請(qǐng)求本地`/src/assets`中的`json`文件，則還需要配置karma.conf.js： ```bash . ├── README.md ├── angular.json ├── e2e ├── karma.conf.js ?? ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 配置前第13至16行： ```json require('@angular-devkit/build-angular/plugins/karma') ], client: { jasmine: { ``` 配置后第13至22行： ```json require('@angular-devkit/build-angular/plugins/karma') ], files: [ {pattern: './src/assets/**', watched: true, included: false, nocache: false, served: true} ], proxies: { '/assets/': '/base/src/assets/' }, client: { jasmine: { ``` >[info] 上述配置無需掌握，不同的Angular版本處理也不同。 隨便我們重啟`ng t`后繼續(xù)學(xué)習(xí)。 ## ngOnInit 在Angular中，推薦我們將組件初始化成功后執(zhí)行的一些方法放到`ngOnInit()`中。Angular在組件初始化的過程中檢測(cè)組件是否存在`ngOnInit()`，如果存在則自動(dòng)完成調(diào)用。 ```typescript constructor(private httpClient: HttpClient) { console.log(httpClient); } /** * 組件初始化完成后將被自動(dòng)執(zhí)行一次 */ ngOnInit(): void { console.log('on init'); } } ``` 同時(shí)Angular官方推薦我們?cè)诮M件中一旦聲明了`ngOnInit()`，則需要在類上實(shí)現(xiàn)`OnInit`接口： ```typescript import {Component, OnInit} from '@angular/core'; ... export class AppComponent implements OnInit { ``` ## 生命周期 我們?cè)?.1.2中曾這么描述生命周期： ``` angular組件在前期大體是如下構(gòu)建的：? 執(zhí)行構(gòu)造函數(shù)，實(shí)例化組件實(shí)例；? 解析V層代碼； ``` 加入本節(jié)的`ngOnInit()`方法后，上述周期將被更精確的修正為： * ? 執(zhí)行構(gòu)造函數(shù)，實(shí)例化組件實(shí)例； * ? 檢測(cè)是否存在`ngOnInit()`方法，有則執(zhí)行一次。 * ? 解析V層代碼； * ? 解析在V層中使用的變量。 >[info] 所謂組件的生命周期，就是組件從出生到銷毀的整個(gè)過程。 ## 發(fā)起請(qǐng)求 HttpClient提供了`get`方法來實(shí)現(xiàn)`json`文件的**預(yù)**請(qǐng)求： ```typescript ngOnInit(): void { this.httpClient.get('assets/teacher-all.json'); } ``` 之所以稱為**預(yù)**請(qǐng)求，是由于上述代碼的實(shí)際作用是定義了一個(gè)請(qǐng)求信息，而并未發(fā)起真正的請(qǐng)求。這就像現(xiàn)實(shí)生活的**預(yù)售**，只有當(dāng)廣大人民群眾付了款商人們才會(huì)去進(jìn)行真正的生產(chǎn)。HttpClient借鑒了這種模式，只有當(dāng)其被**訂閱**時(shí)，才會(huì)真正的發(fā)起請(qǐng)求： ```typescript ngOnInit(): void { this.httpClient.get('assets/teacher-all.json') .subscribe(); } ``` 打開chrome控制臺(tái)中的網(wǎng)絡(luò)選項(xiàng)卡，請(qǐng)求信息顯示如下：  ## 獲取請(qǐng)求值 javascript認(rèn)為發(fā)起http請(qǐng)求這種操作必然是**耗時(shí)**的，所以在此操作上引入了**異步**與**回調(diào)**，我們簡(jiǎn)單的看到其具體的用法，在后續(xù)的章節(jié)中再繼續(xù)講解。 ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe((teachers?) => { console.log(teachers); }); ``` * 當(dāng)請(qǐng)求得到的數(shù)據(jù)放到?中  上述代碼相當(dāng)于在`subscribe()`中傳入了一個(gè)方法: ```typescript ngOnInit(): void { // 定義一個(gè)方法，起名為callback const callback = (teachers: any?): void => { console.log(teachers); }; // 將callback傳入至subscribe this.httpClient.get<any?>('assets/teacher-all.json') .subscribe(callback); } ``` * ? 注意這兩處的類型使用any  實(shí)際上`HttpClient`成功發(fā)起請(qǐng)求后，調(diào)用了傳入`subscribe()`的`callback`方法，并將請(qǐng)求得到的數(shù)值賦值給`callback`的`teachers`變量。 在習(xí)慣上我們更愿意如下書寫： ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe((teachers) => { console.log(teachers); }); ``` 由于該方法僅有一個(gè)參數(shù)，所以還可以去除參數(shù)左右的`()`，被縮寫為： ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => { console.log(teachers); }); ``` 又由于該方法體中僅有一行代碼，所以還可以去除代碼左右的`{}`、代碼后方的`;`，近一步縮寫為: ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => console.log(teachers) ); ``` 在代碼不長(zhǎng)的情況下，有時(shí)候也會(huì)被書寫為一行： ```typescript this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => console.log(teachers)); ``` ## 重新渲染 下面讓我們刪除原C層中teachers初始化的代碼，刪除C層冗余的title屬性，C層代碼最終如下： ```typescript export class AppComponent implements OnInit { // 初始化教師數(shù)組 teachers = []; constructor(private httpClient: HttpClient) { console.log(httpClient); } /** * 組件初始化完成后將被自動(dòng)執(zhí)行一次 */ ngOnInit(): void { this.httpClient.get('assets/teacher-all.json') .subscribe(teachers => console.log(teachers)); } } ```  接著將發(fā)起HTTP請(qǐng)求獲取到的數(shù)據(jù)賦值給當(dāng)前組件的`teachers`屬性： ```typescript ngOnInit(): void { this.httpClient.get<[]>?('assets/teacher-all.json') .subscribe(teachers => this.teachers = teachers?); } ``` * ? 注意在此需要聲明HTTP請(qǐng)求返回的類型 * ? 將請(qǐng)求到的數(shù)據(jù)賦值給組件的teachers屬性  # 本節(jié)作業(yè) ```typescript ngOnInit(): void { this.httpClient.get('assets/teacher-all.json') .subscribe(); } ``` 上述代碼如果不執(zhí)行`subscribe()`則不會(huì)發(fā)生請(qǐng)求。 你該如何驗(yàn)證上述猜想。 # 資源列表 | 名稱 | 地址 | |---- | ---- | | 組件生命周期順序 | [https://www.angular.cn/guide/lifecycle-hooks#lifecycle-event-sequence](https://www.angular.cn/guide/lifecycle-hooks#lifecycle-event-sequence) | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.2.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.2.2.zip)