typescript Angular2 2 路绑定中同名的自定义输入和输出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37855050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom input and output on same name in Angular2 2 way binding
提问by Mathijs Segers
I know how to fix my component using a different name for the output value of this component.
我知道如何使用该组件的输出值的不同名称来修复我的组件。
let me share my code
让我分享我的代码
import {Component, Input, Output, EventEmitter} from '@angular/core'; import {TranslationPipe} from "../pipes/translation.pipe";
从 '@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;
}
}
So this is a very basic component which validates two strings to be a "valid" dutch Mobile number, so a confirm box so to say. Now I can get my value in the parent component by doing something like
所以这是一个非常基本的组件，它验证两个字符串是一个“有效”的荷兰手机号码，所以可以说是一个确认框。现在我可以通过执行类似的操作来获取父组件中的值
(mobile)="myParam = $event"
What I want is to use it like
我想要的是像这样使用它
[(mobile)]="myParam"
This only works for setting though, is this not supported on custom components?
这仅适用于设置，自定义组件不支持吗？
回答by Günter Z?chbauer
For this compact syntax to work the input and output need to follow specific naming rules
为了让这个紧凑的语法起作用，输入和输出需要遵循特定的命名规则
[(mobile)]="myParam"
@Output('mobileChange') emitter: EventEmitter<string> = new EventEmitter<string>();
@Input('mobile') set setMobileValue(value) {
this.msisdn_confirm = this.msisdn = value;
}
Renaming inputs and outputs by passing a string parameter to the decorator is discourages. Rather use
不鼓励通过将字符串参数传递给装饰器来重命名输入和输出。而是使用
@Output() mobileChange: EventEmitter<string> = new EventEmitter<string>();
@Input() set mobile(value) {
this.msisdn_confirm = this.msisdn = value;
}
回答by davaus
Another example of Gunter's code above that may help:
上面可能有帮助的 Gunter 代码的另一个示例：
export class TaskBook {
public taskBookID: number;
public title: String;
}
Inside component code:
内部组件代码：
....
<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);
}
}
Outside in calling component:
在调用组件之外：
<taskbook_edit [(data)]="taskbookObj" ></taskbook_edit>
public taskbookObj: TaskBook;
