[英]Custom input and output on same name in Angular2 2 way binding
我知道如何使用該組件的輸出值的不同名稱來修復我的組件。
讓我分享我的代碼
從 '@angular/core' 導入 {Component、Input、Output、EventEmitter}; 從“../pipes/translation.pipe”導入{TranslationPipe};
@Component({
selector: 'msisdn-confirm',
template: `
<div class="msisdn-confirm">
<div>
<input type="text" [(ngModel)]="m1">
</div>
<div>
<input type="text" [(ngModel)]="m2">
</div>
<p class="error">{{message}}</p>
</div>
`
})
export class MsisdnConfirm {
message:string;
@Output('mobile') emitter: EventEmitter<string> = new EventEmitter<string>();
@Input('mobile') set setMobileValue(value) {
this.msisdn_confirm = this.msisdn = value;
}
set m1(value) {
this.msisdn = value;
if (this.valid()) {
console.log('emit' + this.msisdn);
this.emitter.emit(this.msisdn);
}
}
set m2(value) {
this.msisdn_confirm = value;
if (this.valid()) {
console.log('emit' + this.msisdn);
this.emitter.emit(this.msisdn);
}
}
get m1():string {
return this.msisdn;
}
get m2():string {
return this.msisdn_confirm
}
msisdn: string;
msisdn_confirm: string;
constructor() {
}
private valid(): boolean {
if (!/06[0-9]{8}/.test(this.msisdn)) {
this.message = new TranslationPipe().transform("Het mobiele nummer is incorrect, (bijvoorbeeld: 0612345678)")
return false;
} else if (this.msisdn != this.msisdn_confirm) {
this.message = new TranslationPipe().transform("De mobiele nummers komen niet overeen")
return false;
}
this.message = null;
return true;
}
}
所以這是一個非常基本的組件,它驗證兩個字符串是一個“有效”的荷蘭手機號碼,所以可以說是一個確認框。 現在我可以通過執行類似的操作來獲取父組件中的值
(mobile)="myParam = $event"
我想要的是像這樣使用它
[(mobile)]="myParam"
這僅適用於設置,自定義組件不支持嗎?
為了讓這個緊湊的語法起作用,輸入和輸出需要遵循特定的命名規則
[(mobile)]="myParam"
@Output('mobileChange') emitter: EventEmitter<string> = new EventEmitter<string>();
@Input('mobile') set setMobileValue(value) {
this.msisdn_confirm = this.msisdn = value;
}
不鼓勵通過將字符串參數傳遞給裝飾器來重命名輸入和輸出。 而是使用
@Output() mobileChange: EventEmitter<string> = new EventEmitter<string>();
@Input() set mobile(value) {
this.msisdn_confirm = this.msisdn = value;
}
上面可能有幫助的 Gunter 代碼的另一個示例:
export class TaskBook {
public taskBookID: number;
public title: String;
}
內部組件代碼:
....
<input type="text" pInputText [(ngModel)]="data!.title" (change)="onDataChange()" />
....
@Component({
selector: 'taskbook_edit',
templateUrl: './taskbook_edit.component.html'
})
export class TaskbookEditComponent {
@Input() data: TaskBook;
@Output() dataChange = new EventEmitter<TaskBook>();
constructor() { }
onDataChange() {
this.dataChange.emit(this.data);
}
}
在調用組件之外:
<taskbook_edit [(data)]="taskbookObj" ></taskbook_edit>
public taskbookObj: TaskBook;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.