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

# Output() 軟件設(shè)計(jì)中有一個(gè)重要的原則是：高內(nèi)聚、低耦合。那么什么是高內(nèi)聚低耦合呢？簡單來說就是：能不求人時(shí)，盡量別求人。 我們以Login組件為例，在其中注入了Index組件。這就意味著若要成功的運(yùn)行Login組件，當(dāng)前模塊必須提供一個(gè)Index組件，也就是Login組件與Index組件是綁定在一起的。我們把這種Login組件與Index組件的綁定關(guān)系稱為**耦合**。而這種關(guān)系越多，就說明耦合度越高；這種關(guān)系越少，說明耦合度越低。 在父子組件這層關(guān)系中，父組件是離不開子組件的，而子組件完全的可以脫離父組件。這從我們的開發(fā)順序上便能夠完全體現(xiàn)出來：我們?cè)陂_發(fā)登錄組件時(shí)并沒有父組件Index，但Login組件同樣被運(yùn)行了起來；而在開發(fā)父組件Index時(shí)，就必須有這個(gè)Login組件。 父組件就像是一輛汽車，它是離不開發(fā)動(dòng)機(jī)的。而子組件就像是發(fā)動(dòng)機(jī)，沒有汽車發(fā)動(dòng)機(jī)同樣運(yùn)轉(zhuǎn)。用戶購買汽車的同時(shí)，必然要連同發(fā)動(dòng)機(jī)一起賣給客戶；但如果用戶只想購買一個(gè)發(fā)動(dòng)機(jī)，你卻要打包將汽車一起銷售給客戶就顯得不合理了。 而當(dāng)前Login組件依賴于Index組件的情況，便屬于這種買發(fā)動(dòng)機(jī)捆綁銷售汽車的不合理。 ## 解綁 現(xiàn)實(shí)生活中的汽車與發(fā)動(dòng)機(jī)是靠規(guī)定的連接規(guī)則連在一起的，我們把這個(gè)規(guī)則統(tǒng)稱為**接口**。正是有了這些接口的存在，我們現(xiàn)實(shí)生活中的汽車實(shí)現(xiàn)了同一車型可以搭載不同排量，甚至是燃燒不同油品的發(fā)動(dòng)機(jī)。  在Angular中同樣可以為組件定義接口，該接口規(guī)定好子組件向外發(fā)送的數(shù)據(jù)格式，父組件再去通過一定的方式接收該數(shù)據(jù)。從而達(dá)到子組件與父組件解綁的目的同，解綁后父組件仍然依賴于子組件，但子組件已經(jīng)不再依賴于父組件了。 ## Output() 我們可以在Login組件中以`@Output()`定義相關(guān)屬性，繼而通過該屬性將登錄成功的消息發(fā)送給父組件。首先，我們還原Login組件中相關(guān)的歷史方法。 ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -1,6 +1,5 @@ import {Component, OnInit} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; -import {IndexComponent} from '../index/index.component'; @Component({ selector: 'app-login', @@ -13,8 +12,7 @@ export class LoginComponent implements OnInit { password: string }; - constructor(private httpClient: HttpClient, - private indexComponent: IndexComponent) { + constructor(private httpClient: HttpClient) { } ngOnInit(): void { @@ -33,7 +31,7 @@ export class LoginComponent implements OnInit { .get( 'http://angular.api.codedemo.club:81/teacher/login', {headers: httpHeaders}) - .subscribe(teacher => this.indexComponent.login = true, + .subscribe(teacher => console.log('success'), error => console.log('發(fā)生錯(cuò)誤, 登錄失敗', error)); } } ``` 然后增加用于通知父組件登錄成功的屬性，該屬性的類型為`EventEmmiter`，即：事件彈射器，彈射意為由下向上發(fā)射，在發(fā)射過程中可以發(fā)射多個(gè)，也可以發(fā)射一個(gè)，當(dāng)然也可以不發(fā)射。以當(dāng)前登錄為例，我們?cè)诿看蔚卿洺晒r(shí)發(fā)射一次數(shù)據(jù)，該數(shù)據(jù)將被所以觀察它的**人**的獲取到。 這有點(diǎn)像歷史上節(jié)日里的煙花。煙花在點(diǎn)燃后，將一個(gè)個(gè)彩蛋彈射升空，所有欣賞該煙花的人都會(huì)目睹它綻放時(shí)的風(fēng)采。 ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, EventEmitter, OnInit} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; @Component({ @@ -12,6 +12,8 @@ export class LoginComponent implements OnInit { password: string }; + beLogin = new EventEmitter<void>(); + constructor(private httpClient: HttpClient) { } ``` 需要注意的是當(dāng)前的環(huán)境中存在多個(gè)`EventEmitter`類型，而我們?cè)诖诵枰奈挥赻'@angular/core'`中的`EventEmitter`。 最后我們加入`@Output()`注解，以表明該屬性用于向父組件彈射數(shù)據(jù)。 ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, OnInit} from '@angular/core'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; @Component({ @@ -12,6 +12,7 @@ export class LoginComponent implements OnInit { password: string }; + @Output() beLogin = new EventEmitter<boolean>(); constructor(private httpClient: HttpClient) { ``` ## 父組件獲取數(shù)據(jù) 其實(shí)我們?cè)缭绲乇銓W(xué)會(huì)了在父組中如何獲取子組件彈射的數(shù)據(jù)了，比如我們?cè)讷@取表單點(diǎn)擊事件時(shí)使用的`<form (ngSubmit)="onSubmit()">`。在Index組件中可以如下獲取Login組件彈射出的數(shù)據(jù)： ```html +++ b/first-app/src/app/index/index.component.html @@ -1,2 +1,2 @@ <app-root *ngIf="login"></app-root> -<app-login *ngIf="!login" ></app-login> +<app-login *ngIf="!login" (beLogin)="onLogin()" ></app-login> ``` 沒錯(cuò)，該方法與前面我們寫過的`(ngSubmit)="onSubmit()">`寫法完全一致。 接下來結(jié)合C層的相關(guān)方法，便可以在子組件向上彈射數(shù)據(jù)時(shí)執(zhí)行相關(guān)的代碼： ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -15,4 +15,7 @@ export class IndexComponent implements OnInit { ngOnInit(): void { } + onLogin(): void { + console.log(new Date().toTimeString(), '子組件進(jìn)行了空數(shù)據(jù)彈射'); + } } ``` ### 彈射測試 為了更清楚的弄清楚數(shù)據(jù)彈射的過程，我們?cè)贚ogin組件的`ngOnInit()`方法（該方法中的代碼會(huì)在組件初始化完畢后被自動(dòng)執(zhí)行1次）中增加如下測試代碼： ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -19,6 +19,8 @@ export class LoginComponent implements OnInit { } ngOnInit(): void { + // 每1秒鐘向上彈出一個(gè)空數(shù)據(jù) + setInterval(() => this.beLogin.emit(), 1000); } onSubmit(): void { ```  ### 彈射非空數(shù)據(jù) 既然是數(shù)據(jù)彈射，必然可以彈射非空值。這取決于我們?yōu)閺椛淦鞫x的**泛型**。所謂泛型，就說類型比較寬泛，我們指定它是什么它就是什么，同時(shí)也只能是什么。 在此我們將請(qǐng)求登錄時(shí)獲取到的教師信息作為數(shù)據(jù)彈射時(shí)泛型的類型： ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -13,7 +13,7 @@ export class LoginComponent implements OnInit { }; @Output() - beLogin = new EventEmitter<void>(); + beLogin = new EventEmitter<{ username: string, name: string, email: string, sex: boolean }>(); constructor(private httpClient: HttpClient) { } ``` 然后在模擬數(shù)據(jù)彈射時(shí)，彈射出一個(gè)教師： ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -20,7 +20,12 @@ export class LoginComponent implements OnInit { ngOnInit(): void { // 每1秒鐘向上彈出一個(gè)空數(shù)據(jù) - setInterval(() => this.beLogin.emit(), 1000); + setInterval(() => this.beLogin.emit({ + username: 'zhangsan', + name: '張三', + email: 'zhangsan@yunzhiclub.com', + sex: true + }), 1000); } onSubmit(): void { ``` 在父組件中，接收該彈射值： ```typescript +++ b/first-app/src/app/index/index.component.html @@ -1,2 +1,2 @@ <app-root *ngIf="login"></app-root> -<app-login *ngIf="!login" (beLogin)="onLogin()" ></app-login> +<app-login *ngIf="!login" (beLogin)="onLogin($event)" ></app-login> ``` ?? **注意**：在接收彈射值時(shí)，使用`$event`關(guān)鍵字。 在父組件的C層中接收該值，并進(jìn)行打印。 ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -15,7 +15,7 @@ export class IndexComponent implements OnInit { ngOnInit(): void { } - onLogin(): void { - console.log(new Date().toTimeString(), '子組件進(jìn)行了空數(shù)據(jù)彈射'); + onLogin(teacher: { username: string, name: string, email: string, sex: boolean }): void { + console.log(new Date().toTimeString(), '子組件進(jìn)行了數(shù)據(jù)彈射', teacher); } } ```  ## 完成功能 讓我們?nèi)コ郎y試的代碼，完成登錄組件向父組件彈出登錄教師的功能： ```typescript +++ b/first-app/src/app/login/login.component.ts @@ -19,13 +19,6 @@ export class LoginComponent implements OnInit { } ngOnInit(): void { - // 每1秒鐘向上彈出一個(gè)空數(shù)據(jù) - setInterval(() => this.beLogin.emit({ - username: 'zhangsan', - name: '張三', - email: 'zhangsan@yunzhiclub.com', - sex: true - }), 1000); } onSubmit(): void { @@ -38,10 +31,10 @@ export class LoginComponent implements OnInit { httpHeaders = httpHeaders.append('Authorization', 'Basic ' + authToken); this.httpClient - .get( + .get<any>( 'http://angular.api.codedemo.club:81/teacher/login', {headers: httpHeaders}) - .subscribe(teacher => console.log('success'), + .subscribe(teacher => this.beLogin.emit(teacher), error => console.log('發(fā)生錯(cuò)誤, 登錄失敗', error)); } } ``` 父組件： ```typescript +++ b/first-app/src/app/index/index.component.ts @@ -17,5 +17,6 @@ export class IndexComponent implements OnInit { onLogin(teacher: { username: string, name: string, email: string, sex: boolean }): void { console.log(new Date().toTimeString(), '子組件進(jìn)行了數(shù)據(jù)彈射', teacher); + this.login = true; } } ``` ?? 測試成功！  ??  ??  最后，引入`RouterTestingModule`以消除控制臺(tái)關(guān)于`router-outlet`的錯(cuò)誤： ```typescript +++ b/first-app/src/app/index/index.component.spec.ts @@ -5,6 +5,7 @@ import {AppComponent} from '../app.component'; import {LoginComponent} from '../login/login.component'; import {HttpClientModule} from '@angular/common/http'; import {FormsModule} from '@angular/forms'; +import {RouterTestingModule} from '@angular/router/testing'; describe('IndexComponent', () => { let component: IndexComponent; @@ -13,7 +14,7 @@ describe('IndexComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [IndexComponent, AppComponent, LoginComponent], - imports: [HttpClientModule, FormsModule] + imports: [HttpClientModule, FormsModule, RouterTestingModule] }) .compileComponents(); }); ``` ## 作業(yè) 自學(xué)TypeScript關(guān)于[類](https://www.tslang.cn/docs/handbook/classes.html)的一節(jié)。建立教師`Teacher`類，并使用該類替換本節(jié)中`{ username: string, name: string, email: string, sex: boolean }`相關(guān)的代碼。 | 名稱 | 地址 | 備注 | | --------------------------- | ------------------------------------------------------------ | ---- | | @Output()把數(shù)據(jù)發(fā)送給父組件 | [https://angular.cn/guide/inputs-outputs#output](https://angular.cn/guide/inputs-outputs#output) | | | EventEmitter | [https://angular.cn/api/core/EventEmitter](https://angular.cn/api/core/EventEmitter) | | | 高內(nèi)聚低耦合 | [https://baike.baidu.com/item/%E9%AB%98%E5%86%85%E8%81%9A%E4%BD%8E%E8%80%A6%E5%90%88](https://baike.baidu.com/item/%E9%AB%98%E5%86%85%E8%81%9A%E4%BD%8E%E8%80%A6%E5%90%88) | | | setInterval | [https://www.runoob.com/jsref/met-win-setinterval.html](https://www.runoob.com/jsref/met-win-setinterval.html) | | | Date | [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date) | | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step3.5.zip](https://github.com/mengyunzhi/angular11-guild/archive/step3.5.zip) | |