Angular 事件2 父子元件傳值

在子元件或指令中使用裝飾器，以使angular知道該元件中的屬性可以從其父元件接收其值。有助於記住資料流是從子元件的角度來看的。因此，允許將資料從父元件輸入到子元件中。@input()@input()

要在子元件類中使用裝飾器，請首先匯入，然後用來裝飾屬性：@input()input@input()

import
from
'@angular/core'
;// 
first
, import 
input
export
class
itemdetailcomponent

在這種情況下，裝飾的特性，其具有的型別，然而，屬性可具有任何型別，例如，，，或。的值將來自下一部分將介紹的父元件。@input()itemstring@input()numberstringbooleanobjectitem

接下來，在子元件模板中，新增以下內容：


today's 
item
: }

item]=

"currentitem"

export class

使用的子元件或指令裝飾允許資料從孩子流出來父。@output()

乙個屬性通常應被初始化為角與元件作為值流出事件。@output()eventemitter

此示例的特點是使用者可以在其中輸入值並單擊引發事件的。在eventemitter然後將資料中繼到父元件。

首先，請確保匯入output並且eventemitter在子元件類中：

import
from 
'@angular/core'
;

export
class
itemdetailcomponent

@output()—裝飾器函式，將屬性標記為資料從子級到父級的一種方式

newitemevent—的名稱@output()eventemitter

— 的型別@output()new eventemitter

()—告訴angular建立乙個新的事件發射器，並且它發射的資料為字串型別。該型別可以是任何型別，如number，boolean等。有關更多資訊eventemitter，請參閱eventemitter api文件。

export class itemoutputcomponent 
}

在孩子的模板

孩子的模板有兩個控制項。第乙個是乙個html與模板參考變數，#newitem其中使用者鍵入的專案名稱。無論使用者鍵入什麼，都將儲存在#newitem變數中。

content_copy
add an 
item: #
newitem
>
(click)=
"addnewitem(newitem.value)"
>
add to parent's list

第二個元素是帶有事件繫結的。您知道這是事件繫結，因為等號左側的部分在括號中(click)。

該(click)事件繫結到addnewitem()子元件類中的方法，無論其值#newitem是什麼，該方法都將其作為引數。

現在，子元件具有乙個用於將資料傳送給父元件的元件和乙個引發事件的方法。下一步是在父級中。@output()

content_copyexport
class
}

該additem()方法採用字串形式的引數，然後將該字串推入或新增到items陣列中。

在父母的模板

newitemevent)=

"additem($event)"

事件繫結(newitemevent)='additem($event)'告訴angular將子級中的事件連線newitemevent到父級中的方法additem()，並且子級通知父級的事件將作為的引數additem()。換句話說，這是實際移交資料的地方。在$event包含資料的使用者型別為在子模板ui。

現在，為了檢視工作原理，將以下內容新增到父級的模板中：@output()

content_copy

該遍歷中的專案陣列。當您在子項中輸入值並單擊按鈕時，子項將發出事件，父項的方法會將值推入陣列，然後將其呈現在列表中。*ngforitemsadditem()items

Angular 事件2 父子元件傳值

angular父子元件傳值二

Angular父子元件通過服務傳參

Angular元件父子元件通訊

Angular 事件2 父子元件傳值

angular父子元件傳值 二

Angular父子元件通過服務傳參

Angular元件 父子元件通訊

相關推薦

angular父子元件傳值二

Angular元件父子元件通訊