angular父子組件通信詳解
更新時間：2021年12月22日 16:03:26 作者：桐溪漂流
這篇文章主要為大家介紹了angular父子組件通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
用到的api
Input - 子組件中定義可接受的屬性，可以用來父組件給子組件傳遞數(shù)據(jù)
Output - 子組件中定義輸出的屬性，該屬性需要是 EventEmitter 的事件類型，用來通知父組件做出相應(yīng)的操作
EventEmitter - 用在帶有 @Output 指令的組件中，以同步或異步方式發(fā)出自定義事件，并通過訂閱實例來為這些事件注冊處理器。
簡單的例子
列表渲染子組件，點擊子組件通知父組件進行操作
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é)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(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)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
這篇文章記錄了當(dāng)時剛學(xué)習(xí)angular的時候踩的關(guān)于作用域的坑，希望給以后學(xué)習(xí)Angular作用域的朋友一個提醒，有需要的可以參考學(xué)習(xí)。2016-08-08
詳解從angular-cli：1.0.0-beta.28.3升級到@angular/cli：1.0.0
本篇文章主要介紹了詳解從angular-cli：1.0.0-beta.28.3升級到@angular/cli：1.0.0，具有一定的參考價值，有興趣的可以了解一下2017-05-05
這篇文章主要介紹了Angular搜索場景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下2018-05-05
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
用AngularJS來實現(xiàn)監(jiān)察表單按鈕的禁用效果
本篇文章主要介紹了用AngularJS來實現(xiàn)監(jiān)察表單按鈕的禁用效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
解決angularjs中同步執(zhí)行http請求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請求的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
使用typescript開發(fā)angular模塊并發(fā)布npm包
本篇文章主要介紹了使用typescript開發(fā)angular模塊并發(fā)布npm包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹了手動初始化Angular的模塊與控制器的方法，具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
Angularjs實現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實現(xiàn)帶查找篩選功能的select下拉框的詳細過程及示例代碼，文中通過示例介紹的很詳細，相信會對大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價值，有需要的朋友們可以一起來看看。2016-10-10