資訊專欄INFORMATION COLUMN
摘要：在編寫組件之前，首先看一下組件的使用方式和效果其中標(biāo)簽是自定義組件，利用符號(hào)進(jìn)行雙向綁定，下面標(biāo)簽顯示所綁定的值。
在包裝輸入類型的組件時(shí)，我們需要向外暴露數(shù)據(jù)接口，用戶輸入和輸出，這時(shí)候在組件內(nèi)部定義雙向綁定，會(huì)大大方便用戶的使用。
在編寫組件之前，首先看一下組件的使用方式和效果：
app.component：{{testBinding}}
其中binding-test標(biāo)簽是自定義組件，利用[()]符號(hào)進(jìn)行雙向綁定，下面p標(biāo)簽顯示所綁定的值。
效果圖如下：
binding-test組件綁定的值顯示在網(wǎng)頁上。
編寫組件新建組件視圖
簡單起見，我們創(chuàng)建的組件只包含一個(gè)輸入框。新建binding-test.component.html如下：
視圖層只有一個(gè)label和一個(gè)input標(biāo)簽，這是一個(gè)最簡單的表單。
其中ngModelChange是當(dāng)input發(fā)生變化時(shí)，觸發(fā)的事件。
新建組件類
雙向綁定的組件需要有一個(gè) Input屬性和該屬性對應(yīng)的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屬性對應(yīng)名字+Change
至此，該組件即可使用類似于[(ngModel)]語法的雙向綁定了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/98266.html
摘要：實(shí)現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個(gè)組件按鈕我們在下面的代碼中，動(dòng)態(tài)創(chuàng)建以上兩個(gè)組件，并實(shí)現(xiàn)位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧 ngConten...
摘要：實(shí)現(xiàn)組件位置交換中視圖是和數(shù)據(jù)綁定的，它并不推薦我們直接操作元素，而且推薦我們通過操作數(shù)據(jù)的方式來改變組件視圖。首先定義兩個(gè)組件按鈕我們在下面的代碼中，動(dòng)態(tài)創(chuàng)建以上兩個(gè)組件，并實(shí)現(xiàn)位置交換功能。 這篇文章主要介紹了angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧 ngConten...
閱讀 3125·2021-11-22 09:34
閱讀 3709·2021-08-31 09:45
閱讀 3955·2019-08-30 13:57
閱讀 1736·2019-08-29 15:11
閱讀 1733·2019-08-28 18:04
閱讀 3285·2019-08-28 17:59
閱讀 1624·2019-08-26 13:35
閱讀 2246·2019-08-26 10:12
