angular2 ng2 @input和@output理解及示例
angular2 @input和@output理解
先做個(gè)比方，然后奉上代碼
比如：
<talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)">
input， [talk]="someExp" 這個(gè)標(biāo)簽可以理解為一個(gè)專門的監(jiān)聽(tīng)器，監(jiān)聽(tīng)父組件傳遞過(guò)來(lái)的someExp參數(shù)，并存入自身組件的talk變；好像是開(kāi)了個(gè)后門，允許且只允許父組件的someExp進(jìn)入，一旦進(jìn)入立刻抓進(jìn)一個(gè)叫talk的牢房，然后子組件中就可以通過(guò)@Input來(lái)定義這個(gè)變量talk然后使用它。
output ，(click)="eventHandler($event.rating) 這個(gè)意思是， 當(dāng)子組件的click事件被觸發(fā)，就執(zhí)行父組件的eventHandler函數(shù)，并把子組件的參數(shù)$event.rating傳遞給父組件的eventHandler函數(shù)；就好像，當(dāng)小孩子一哭（執(zhí)行click事件），他的母親立刻把他抱在懷里（執(zhí)行母親的eventHandler），同時(shí)母親獲得了小孩子的一些參數(shù)（$event.rating）
1、@input()
父組件 father.component.ts 提供數(shù)據(jù)
import {Component} from "@angular/core";
@Component({
selector: "my-father",
templateUrl: "father.html"
})
export class FatherComponent {
data: Array<Object>;
constructor() {
this.data = [
{
"id": 1,
"name": "html"
},
{
"id": 2,
"name": "css"
},
{
"id": 3,
"name": "angular"
},
{
"id": 4,
"name": "ionic"
},
{
"id": 5,
"name": "node"
}
]
}
}
模板文件 father.html
<h1>父組件</h1> // 包含子組件， 并使用屬性傳遞數(shù)據(jù)過(guò)去 <my-child [info]="data"></my-child>
子組件 child.component.ts 獲取數(shù)據(jù)
import {Component, Input} from "@angular/core";
@Component({
selector: "my-child",
templateUrl: "child.html"
})
export class ChildComponent {
// 使用@Input獲取傳遞過(guò)來(lái)的數(shù)據(jù)
@Input()
info: Array<Object>;
constructor() {
}
}
子組件 child.html模板文件
<ul>
<li *ngFor="let item of info">
{{item.name}}
</li>
</ul>
2、@Output()
子組件three-link.component.ts
1. 引入
import {Component, OnInit, Output, EventEmitter} from "@angular/core";
2. 定義輸出變量
export class ThreeLinkComponent {
province: string;
// 輸出一下參數(shù)
@Output() provinceOut = new EventEmitter();
constructor() {
this.province = "陜西";
}
}
3. 事件出發(fā)，發(fā)射變量給父組件
provinceChange() {
// 選擇省份的時(shí)候發(fā)射省份給父組件
this.provinceOut.emit(this.province);
}
父組件模板
<!--三級(jí)聯(lián)動(dòng)組件--> <three-link (provinceOut)="recPro($event)"></three-link>
父組件
// 函數(shù)接受子函數(shù)傳遞過(guò)來(lái)的變量， 子函數(shù)中emit的時(shí)候觸發(fā)這個(gè)函數(shù)。
recPro(event) {
this.province = event;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念，但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說(shuō)明的相關(guān)資料,需要的朋友可以參考下2016-08-08
Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法實(shí)例分析
這篇文章主要介紹了Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法,結(jié)合實(shí)例形式詳細(xì)分析了Angular2管道與純管道相關(guān)概念、語(yǔ)法及使用技巧,需要的朋友可以參考下2017-11-11
AngularJS中使用ng-repeat的index問(wèn)題
這篇文章主要介紹了AngularJS中使用ng-repeat的index問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了AngularJS的$location使用方法詳解的相關(guān)資料,希望通過(guò)本文大家能夠掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
本文主要介紹了RequireJs的使用。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05
Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用
本篇文章主要介紹了Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
淺談關(guān)于angularJs中使用$.ajax的注意點(diǎn)
本篇文章主要介紹了關(guān)于angularJs中使用$.ajax的注意點(diǎn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive，需要的朋友一起學(xué)習(xí)吧2016-04-04