本篇文章為大家介紹一下Angular中父子元件間傳遞資料的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
環境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
<parent-component> <child-component></child-component> </parent-component>父元件傳入資料給子元件,同時,子元件資料發生變化是,希望能夠通知父組件。 Angular 中,@Input() 和 @Output() 為子元件提供了一種與其父元件通訊的方法。 @Input() 允許父元件更新子元件中的資料。相反,@Output() 允許子元件向父元件發送資料。 【相關教學推薦:《
angular教學》】
##2.1 .子元件定義@Input()子元件中的@Input() 裝飾器表示該屬性可以從其父元件中取得值。
例如:
export class ChildComponent { @Input() message: string; }
1、增加@Input() 裝飾器的變量,除了資料可以從父元件傳入後,其他邏輯和普通變數一致;
2.子元件的html程式碼中,既可使用message這個變量, 例如:
<p> Parent says: {{message}} </p>
2.2.父元件傳遞變數給子元件#當父元件呼叫子元件時,可以把父元件的變數(如
messageToChild) 傳遞給子元件<pre class="brush:js;toolbar:false;"><child-component [message]="messageToChild"></child-component></pre>
message這個傳入的變量,但是其作用域只在子元件中,父元件拿不到更改後的結果。 (如何傳給父元件,請接著看)
##3. 子傳父@Output()
#子元件定義@Output
export class ChildComponent { // EventEmitter ,这意味着它是一个事件 // new EventEmitter<string>() - // 使用 Angular 来创建一个新的事件发射器,它发出的数据是 string 类型的。 @Output() newItemEvent = new EventEmitter<string>(); addNewItem(value: string) { this.newItemEvent.emit(value); } }子元件當資料變更時,呼叫這個
addNewItem
方法既可。例如,html中<label>Add an item: <input #newItem></label> <button (click)="addNewItem(newItem.value)">Add to parent's list</button>
3.2. 父元件訂閱事件1、父元件的ts程式碼中,增加一個處理上面事件的方法,例如
addItem(newItem: string) { // logic here }2、父元件的html中,訂閱該事件。
<child-component (newItemEvent)="addItem($event)"></child-component>事件綁定
(newItemEvent)='addItem($event)'
會將子元件中的 newItemEvent 事件連接到父元件的 addItem() 方法。4. 總結
以上是淺談Angular中父子組件間怎麼傳遞數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!