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

问题描述

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

I know how to fix my component using a different name for the output value of this component.

让我分享我的代码

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

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"

我想要像

[(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屋！