Angular中父子組件雙向綁定傳值


下面為大家展示一個較為簡單的ng父子組件雙向綁定傳值,下面是父組件頁面

這個頁面的大概功能就是父組件(紅色)通過輸入框輸入內容反映到子組件上進行展示,並且進行了投影,

子組件(橙黃色)通過Input輸入框輸入內容反映到父組件上,並且使用了@Output傳值給父組件

下面是父組件的頁面

父組件ts

子組件頁面

子組件ts

我主要來說下需要注意的幾個地方,第一個就是當我利用子組件的@Output發射數據給父組件的時候,

import { EventEmitter } from '@angular/core';

 EventEmitter 的導入需要注意,同時子組件需要用@Output發射給父組件的ziChange的zi后面必須是Change,

這樣才可以在父組件頁面使用[()]這種綁定綁定方式,否則還需要自己寫個方法接收。建議大家盡量避免使用

@ViewChild這種的方式獲取子組件的方法和值。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM