資訊專欄INFORMATION COLUMN
摘要：在編寫組件之前，首先看一下組件的使用方式和效果其中標簽是自定義組件，利用符號進行雙向綁定，下面標簽顯示所綁定的值。
在包裝輸入類型的組件時，我們需要向外暴露數(shù)據(jù)接口，用戶輸入和輸出，這時候在組件內(nèi)部定義雙向綁定，會大大方便用戶的使用。
在編寫組件之前，首先看一下組件的使用方式和效果：
app.component：{{testBinding}}
其中binding-test標簽是自定義組件，利用[()]符號進行雙向綁定，下面p標簽顯示所綁定的值。
效果圖如下：
binding-test組件綁定的值顯示在網(wǎng)頁上。
編寫組件新建組件視圖
簡單起見，我們創(chuàng)建的組件只包含一個輸入框。新建binding-test.component.html如下：
視圖層只有一個label和一個input標簽，這是一個最簡單的表單。
其中ngModelChange是當input發(fā)生變化時，觸發(fā)的事件。
新建組件類
雙向綁定的組件需要有一個 Input屬性和該屬性對應的Output事件，組件類binding-test.component.ts代碼如下：
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
@Component({
// tslint:disable-next-line:component-selector
selector: "binding-test",
templateUrl: "./binding-test.component.html",
styleUrls: ["./binding-test.component.css"]
})
/**
* 自定義組件雙向數(shù)據(jù)綁定
*/
export class BindingTestComponent implements OnInit {
@Input() public userName;
@Output() public userNameChange = new EventEmitter();
constructor() { }
ngOnInit() {
}
/**
* change
*/
public change(userName: string) {
this.userNameChange.emit(this.userName);
}
}
其中主要代碼為
注意：Output中EventEmitter類型屬性的名字必須為 Input屬性對應名字+Change
至此，該組件即可使用類似于[(ngModel)]語法的雙向綁定了。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98266.html
摘要：實現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態(tài)創(chuàng)建以上兩個組件，并實現(xiàn)位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ngConten...
摘要：實現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個組件按鈕我們在下面的代碼中，動態(tài)創(chuàng)建以上兩個組件，并實現(xiàn)位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實現(xiàn)組件位置交換(重排)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ngConten...
閱讀 3057·2021-11-22 09:34
閱讀 3649·2021-08-31 09:45
閱讀 3865·2019-08-30 13:57
閱讀 1682·2019-08-29 15:11
閱讀 1689·2019-08-28 18:04
閱讀 3232·2019-08-28 17:59
閱讀 1573·2019-08-26 13:35
閱讀 2196·2019-08-26 10:12
