亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何通過(guò)簡(jiǎn)單的代碼描述Angular父組件、子組件傳值

 更新時(shí)間:2022年04月07日 17:09:14   作者:LYX6666  
Vue組件是學(xué)習(xí)Vue框架最比較難的部分,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)簡(jiǎn)單的代碼描述Angular父組件、子組件傳值的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

引言

對(duì)于稍微接觸過(guò)Angular組件的同學(xué)來(lái)說(shuō),組件間交互應(yīng)該沒有什么問(wèn)題。

本文想追求的是用一個(gè)通俗解釋,幫助自己理解的更準(zhǔn)確。

零、知識(shí)鋪墊

CSS選擇器

在介紹父子組件之前,先要了解一個(gè)概念——selector、選擇器

我們定義一個(gè)新組件時(shí),一定會(huì)有這個(gè)屬性:

@Component({
  selector: 'app-village-edit', ①
  templateUrl: './village-edit.component.html',
  styleUrls: ['./village-edit.component.scss']
})

其中①就是選擇器,就是告訴別的組件,如果想調(diào)用我這個(gè)組件,就要使用本組件的選擇器<selectorName></selectorName>來(lái)調(diào)用。

本質(zhì)上就是定義了組件的HTML標(biāo)簽,就像常見的<p>標(biāo)簽、<button>標(biāo)簽一樣。

一、什么是父子組件

就像現(xiàn)實(shí)中父母和孩子的關(guān)系是相對(duì)的一樣,一個(gè)人對(duì)于它的父母來(lái)說(shuō),就承擔(dān)了孩子的角色;對(duì)于它的孩子來(lái)說(shuō)則承擔(dān)了父母的角色。

父組件和子組件也是相對(duì)的。

假設(shè),一個(gè)組件在自己的HTML模板中,通過(guò)選擇器(也就是特定的HTML標(biāo)簽)來(lái)調(diào)用其他組件時(shí)。我們稱這個(gè)組件為父組件,而那個(gè)被調(diào)用的組件稱為子組件

二、父組件調(diào)用子組件的方法

定義了兩個(gè)類:

child.component.ts,它的選擇器selector是: 'app-child'

parent.component.ts,它的選擇器selector是: 'app-parent',

此時(shí),在parent組件的HTMl中引用child組件的選擇器:

<app-child></app-child>

這樣就完成了子組件的調(diào)用。
此時(shí),如果通過(guò)路由加載父組件,就會(huì)發(fā)現(xiàn)子組件也會(huì)在特定的位置被渲染出來(lái)。

三、父組件向子組件傳值

子組件使用@input裝飾器接收數(shù)據(jù)

子組件從父組件接收的值,會(huì)保存到子組件的變量中。

所以用來(lái)接收傳值的變量與普通變量唯一的區(qū)別,就是在常規(guī)的變量上增加一個(gè)@input()注解。

定義普通變量是這樣的:

master = 'Master';

如果用來(lái)接收傳值,只要改成這樣:

@Input() master = 'Master';

這樣,master變量默認(rèn)是'Master'字符串。

但如果父組件向其傳值,變量就變成了接收的值。

父組件使用方括號(hào)[]發(fā)送數(shù)據(jù)

常規(guī)方式調(diào)用子組件:

<app-child></app-child>

如果子組件可以接收數(shù)據(jù),就可以用[propertyName] = value的方法來(lái)傳值。
例如:

<app-child [master]="hero"> </app-child>

用這種寫法可以實(shí)現(xiàn):一旦組件渲染完成后,子組件中的master變量就是'hero'的值了。

當(dāng)父組件中的變量值變化時(shí),子組件也會(huì)同步變化,也就是說(shuō),子組件可以監(jiān)聽傳過(guò)來(lái)的值的變化信息。

升級(jí):子組件通過(guò)set方法監(jiān)聽傳入數(shù)據(jù)變化

在上面的方式中,對(duì)于傳過(guò)來(lái)的值,雖然可以監(jiān)聽變化,但局限在于:子組件只能直接使用傳入的值。

如果想對(duì)傳入的值進(jìn)行處理或過(guò)濾,就要稍微調(diào)整一下子組件。

常規(guī)情況下,子組件是通過(guò)給變量加上@Input裝飾器來(lái)接收參數(shù)的:

@Input() name = 'name';

如果想處理參數(shù),只需要把接收傳值的變量變成set方法即可:

@Input() 
get name(): string { return this._name; }
set name(name: string) { 
    // 此處可以增加其他處理邏輯
    this._name = name; 
} 
private _name = '';

此時(shí),_name是內(nèi)部變量,當(dāng)父組件對(duì)于name屬性傳入值的時(shí)候,會(huì)自動(dòng)執(zhí)行set name方法給_name賦值并增加其他的處理邏輯。

另一種升級(jí):子組件通過(guò)ngOnChanges()生命周期鉤子監(jiān)聽傳入數(shù)據(jù)變化

官方文檔中寫到:“當(dāng)需要監(jiān)視多個(gè)、交互式輸入屬性的時(shí)候,ngOnChanges()比用屬性 setter 方法更合適。”

常規(guī)情況下,子組件是通過(guò)給變量加上@Input裝飾器來(lái)接收參數(shù)的:

@Input() param1 = 'string1';
@Input() param2 = 'string2';

當(dāng)我們要監(jiān)聽多個(gè)變量的變化并做出反應(yīng)時(shí),可以用ngOnChanges()方法:

@Input() param1 = 'string1';
@Input() param2 = 'string2';

ngOnChanges(changes: SimpleChanges) {  ①

    for (const propName in changes) {  ②
    
        // 通過(guò)變量名獲取變化信息
        const changedProp = changes[propName];  
        // 獲取上一個(gè)值
        const from = JSON.stringify(changedProp.previousValue); ③
        // 獲取當(dāng)前值
        const to = JSON.stringify(changedProp.currentValue);     ④
        // 此處可以添加其他處理過(guò)程了 ⑤
     } 
     
}

① 執(zhí)行ngOnChanges()方法時(shí),可以用一個(gè)SimpleChanges參數(shù)來(lái)獲得當(dāng)前組件所有參數(shù)的變化情況。

② 通過(guò)循環(huán)獲得每一個(gè)參數(shù)的上一個(gè)值和當(dāng)前值。

③ 獲得上一個(gè)值④ 獲得當(dāng)前值⑤ 根據(jù)業(yè)務(wù)邏輯添加其他處理過(guò)程

注:由于ngOnChanges方法調(diào)用非常頻繁,會(huì)導(dǎo)致性能問(wèn)題或者軟件崩潰,所以建議少用。

四、子組件向父組件傳值

子組件向父組件彈射事件

剛剛講到了子組件如何獲取父組件的傳入的變量,如何監(jiān)聽父組件的變化,以及如何處理傳入的值。

接下來(lái)講反向的傳輸:父組件如何監(jiān)聽子組件的變化,并做出反應(yīng)。

定義普通變量是這樣的:

param1 = 'String1';

如果想把這個(gè)變量暴露給父組件,需要在變量前加入@output()裝飾器,并且給他賦值一個(gè)變量彈射器

@Output() param1 = new EventEmitter<string>();

此處EventEmitter是變量彈射器,EventEmitter需要一個(gè)確定的類型。

但此時(shí),這個(gè)param1變量就不能再用等號(hào)"="賦值了,如果想讓父組件監(jiān)聽到變化,就需要用彈射方法.emit

this.param1.emit("String2");

接下來(lái)前往父組件。

父組件監(jiān)聽子組件彈射的事件

剛剛已經(jīng)在子組件設(shè)置好了暴露的變量,那么父組件如何接收呢?

常規(guī)的父組件調(diào)用子組件:

<app-child></app-child>

如果想監(jiān)聽子組件的某個(gè)變量,可以使用圓括號(hào)():

<app-child (param1)="function1($event)">

</app-child>

$event 是Angular內(nèi)置的事件變量。

function1我們?cè)诟附M件中定義的處理變化的方法。

使用方式如下:

function1(param2: boolean) { 
    // 這個(gè)param2為我們自己定義的參數(shù)名,
    // 本質(zhì)上是子組件中變化的param1參數(shù),但不用和子組件中的參數(shù)名相同
    // 在此處增加處理過(guò)程即可
}

此時(shí),當(dāng)param1的值發(fā)生變化,就會(huì)執(zhí)行function1,并且傳入一個(gè)事件,事件的實(shí)質(zhì)內(nèi)容就是子組件定義的param1參數(shù)。

function1方法把參數(shù)作為param2接收,并添加處理過(guò)程。

五、總結(jié)

  • Angular中,在HTML通過(guò)selector選擇器調(diào)用的組件稱為子組件。
  • 父組件向子組件傳值使用方括號(hào)[]
  • 子組件有兩種方式接收值: @input + 變量名、@Input + set方法
  • 子組件想父組件傳遞事件使用EventEmitter
  • 父組件接收事件使用圓括號(hào)(),并聲明一個(gè)處理方法用來(lái)調(diào)用

熟悉的風(fēng)格,一圖勝千言:

六、后記

是不是有似曾相識(shí)的感覺,在剛開始接觸Angular時(shí)就知道,可以使用方括號(hào)[]來(lái)綁定原生HTML標(biāo)簽的某些屬性,例如:

<p [id]="sayHelloId" [style.color]="fontColor">
    You can set my color in the component!
</p>

另一方面,還有一個(gè)相似之處就是,Angular中也是使用圓括號(hào)()來(lái)綁定原生HTML標(biāo)簽的某個(gè)方法,例如:

<button (click)="onClick()"> 
    點(diǎn)我!
</button>

這些是巧合嗎?并不是。

我們可以這樣理解:

Angular中所有的原生HTML標(biāo)簽都變成了組件。

之所以很多標(biāo)簽中可以用方括號(hào)[]綁定屬性、使用圓括號(hào)()綁定方法,是因?yàn)锳ngular已經(jīng)為我們擴(kuò)展了原生的HTML標(biāo)簽,使它們具備了接收和發(fā)送數(shù)據(jù)的能力!

換言之,在Angular內(nèi)部的組件中,已經(jīng)為我們加上了許許多多的@input@output裝飾器,我們才能方便的綁定這些屬性和方法。

總結(jié)

到此這篇關(guān)于如何通過(guò)簡(jiǎn)單的代碼描述Angular父組件、子組件傳值的文章就介紹到這了,更多相關(guān)Angular父組件、子組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論