angular父子組件通信詳解
更新時(shí)間：2021年12月22日 16:03:26 作者：桐溪漂流
這篇文章主要為大家介紹了angular父子組件通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
用到的api
Input - 子組件中定義可接受的屬性，可以用來(lái)父組件給子組件傳遞數(shù)據(jù)
Output - 子組件中定義輸出的屬性，該屬性需要是 EventEmitter 的事件類型，用來(lái)通知父組件做出相應(yīng)的操作
EventEmitter - 用在帶有 @Output 指令的組件中，以同步或異步方式發(fā)出自定義事件，并通過(guò)訂閱實(shí)例來(lái)為這些事件注冊(cè)處理器。
簡(jiǎn)單的例子
列表渲染子組件，點(diǎn)擊子組件通知父組件進(jìn)行操作
person.ts
export interface Person {
name: string;
age: number;
sex: string;
}
父組件
import { Component, OnInit } from '@angular/core';
import { Person } from './person';
@Component({
selector: 'app-comp-parent',
template: `
<app-comp-child
*ngFor="let person of personList"
(itemClick)="onItemClick($event)"
[data]="person"
></app-comp-child>
`,
})
export class CompParentComponent implements OnInit {
personList: Person[] = [
{ name: '張三', age: 21, sex: '男' },
{ name: '李四', age: 25, sex: '男' },
{ name: '李莉', age: 20, sex: '女' },
];
constructor(){ }
ngOnInit(): void { }
onItemClick(item: Person){
console.log('click-person: ', item);
}
}
子組件
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Person } from './person';
@Component({
selector: 'app-comp-child',
template: `
<div (click)="itemClick.emit(data)">
Name: {{ data.name }}
Age: {{ data.age }}
Sex: {{ data.sex }}
</div>
`,
})
export class CompChildComponent implements OnInit {
@Input() data!: Person;
@Output() itemClick = new EventEmitter();
constructor(){ }
ngOnInit(): void { }
}
效果
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入（二）
大家都知道依賴注入式AngularJS的重要特性之一，之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-06-06
這篇文章記錄了當(dāng)時(shí)剛學(xué)習(xí)angular的時(shí)候踩的關(guān)于作用域的坑，希望給以后學(xué)習(xí)Angular作用域的朋友一個(gè)提醒，有需要的可以參考學(xué)習(xí)。2016-08-08
詳解從angular-cli：1.0.0-beta.28.3升級(jí)到@angular/cli：1.0.0
本篇文章主要介紹了詳解從angular-cli：1.0.0-beta.28.3升級(jí)到@angular/cli：1.0.0，具有一定的參考價(jià)值，有興趣的可以了解一下2017-05-05
Angular搜索場(chǎng)景中使用rxjs的操作符處理思路
這篇文章主要介紹了Angular搜索場(chǎng)景中使用rxjs的操作符處理思路,主要的思路就是通過(guò)Subject來(lái)發(fā)送過(guò)濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下2018-05-05
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
用AngularJS來(lái)實(shí)現(xiàn)監(jiān)察表單按鈕的禁用效果
本篇文章主要介紹了用AngularJS來(lái)實(shí)現(xiàn)監(jiān)察表單按鈕的禁用效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
解決angularjs中同步執(zhí)行http請(qǐng)求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請(qǐng)求的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
使用typescript開(kāi)發(fā)angular模塊并發(fā)布npm包
本篇文章主要介紹了使用typescript開(kāi)發(fā)angular模塊并發(fā)布npm包，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
本文主要介紹了手動(dòng)初始化Angular的模塊與控制器的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過(guò)程及示例代碼，文中通過(guò)示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來(lái)看看。2016-10-10