1. 程式人生 > >angular之父子組件通信

angular之父子組件通信

emc use 名稱 定義 寫法 () 標簽 pan NPU

父組件向子組件傳入數據

例如將父組件的user對象傳入子組件additem中
<app-additem [user]=”user" #additem></app-additem>
1、將父組件的user對象傳入子組件additem中,組件模板中綁定屬性[user]
2、子組件中類中先導入user對象,之後就可以在組件中直接使用該對象
@Input () user;

父組件訪問子組件的方法和數據
方法一:
<button (click)="additem.add()" nz-button type="primary">添加</button>
<app-addItem [user]=“user #additem></app-addItem>
通過在子組件標簽上加上屬性#<name>,那麽在組件模板中就可以直接通過該名稱調用子組件裏的方法和屬性。但是這種寫法有局限性,只能在html模板中使用,父組件本身的ts代碼中並不能使用

方法二:
父組件ts代碼中調用子組件的方法和屬性。
首先導入模塊ViewChild。
import {ViewChild } from ‘@angular/core‘;
在父組件的類中將子組件作為viewChild註入到父組件中
@ViewChild(AdditemComponent)
private additem: AdditemComponent
在父組件的方法中就可以通過this.additem[方法/屬性名]來調用子組件的方法或屬性數據

子組件調用父組件的方法

子組件導出 EventEmitter 屬性,通過emits方法,觸發父組件中綁定的該屬性的事件。
具體用法:
子組件中引入EventEmitter和Output 模塊
import { EventEmitter, Output } from ‘@angular/core‘;
定義輸出:
@Output() addItem = new EventEmitter();

觸發:
this.addItem.emit(this.user);
父組件定義addItem事件
<app-addItem (addItem)="onAdditem($event)"></app-addItem>
當子組件emit觸發父組件的自定義事件addItem時,會觸發父組件的onAdditem方法

angular之父子組件通信