父組件傳值給子組件

• 父組件綁定自定義屬性，例如： [item]=“currentItem”；子組件通過**@input()**裝飾器接收屬性

子組件觸發父組件方法

• 使用 EventEmitter 自定義事件：
  1.創建一個EventEmitter 并使用@Output()裝飾器將其對外暴露為屬性。
  2.調用EventEmitter.emit(data) 發出事件，傳入數據
  3.父組件通過綁定到該屬性來監聽事件，并通過傳入的$event對象接收數據

//父組件 <app-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-detail>deleteItem(val:string):void {//do something... } //子組件 <button (click)="delete($event)">{{item}}</button>@Component({selector: 'app-detail,templateUrl: './detail.component.html',styleUrls: ['./detail.component.scss'] }) export class DetailComponent {@Input() item = '';@Output() deleteRequest = new EventEmitter<string>();delete(val:string):void {//通過emit方法觸發父組件的deleteItem方法this.deleteRequest.emit(val);} }

總結

以上是生活随笔為你收集整理的angular 组件通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。