路绑定中同名的自定义输入和输出

路绑定中同名的自定义输入和输出

本文介绍了Angular2 2 路绑定中同名的自定义输入和输出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

让我分享我的代码

从'@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 路绑定中同名的自定义输入和输出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 03:32