Angular2 2 路绑定中同名的自定义输入和输出 [英] Custom input and output on same name in Angular2 2 way binding

问题描述

我知道如何使用不同的名称作为该组件的输出值来修复我的组件.

让我分享我的代码

从'@angular/core'导入{Component、Input、Output、EventEmitter}；从../pipes/translation.pipe"导入{TranslationPipe}；

@Component({选择器:'msisdn-confirm'，模板:`<div class="msisdn-confirm"><div><input type="text" [(ngModel)]="m1">

<div><input type="text" [(ngModel)]="m2">

<p class="error">{{message}}</p>

`})导出类 MsisdnConfirm {消息:字符串；@Output('mobile') 发射器:EventEmitter= new EventEmitter();@Input('mobile') 设置 setMobileValue(value) {this.msisdn_confirm = this.msisdn = 值；}设置 m1(值){this.msisdn = 值；如果(this.valid()){console.log('emit' + this.msisdn);this.emitter.emit(this.msisdn);}}设置 m2(值){this.msisdn_confirm = 值；如果(this.valid()){console.log('emit' + this.msisdn);this.emitter.emit(this.msisdn);}}得到 m1():string {返回 this.msisdn;}得到 m2():string {返回 this.msisdn_confirm}msisdn:字符串；msisdn_confirm:字符串；构造函数(){}私人有效():布尔{如果 (!/06[0-9]{8}/.test(this.msisdn)) {this.message = new TranslationPipe().transform("Het 手机号码不正确，(bijvoorbeeld: 0612345678)")返回假；} else if (this.msisdn != this.msisdn_confirm) {this.message = new TranslationPipe().transform("De mobiele nummers komen niet overeen")返回假；}this.message = null;返回真；}}

所以这是一个非常基本的组件，它验证两个字符串是一个有效"的荷兰手机号码，所以可以说是一个确认框.现在我可以通过做类似的事情来获取父组件中的值

(mobile)="myParam = $event"

我想要的是像使用它

[(mobile)]="myParam"

但这仅适用于设置，自定义组件不支持此功能吗?

解决方案

为了让这个紧凑的语法起作用，输入和输出需要遵循 具体命名规则

[(mobile)]=myParam"

 @Output('mobileChange') 发射器:EventEmitter= new EventEmitter();@Input('mobile') 设置 setMobileValue(value) {this.msisdn_confirm = this.msisdn = 值；}

不鼓励通过将字符串参数传递给装饰器来重命名输入和输出.而是使用

 @Output() mobileChange: EventEmitter= new EventEmitter();@Input() 设置移动(值){this.msisdn_confirm = this.msisdn = 值；}

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";

@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?

解决方案

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;
  }

这篇关于Angular2 2 路绑定中同名的自定义输入和输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！