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