Angular2 2方式绑定中同名的自定义输入和输出

Posted 2023-02-23

【中文标题】Angular2 2方式绑定中同名的自定义输入和输出

【英文标题】：Custom input and output on same name in Angular2 2 way binding

【发布时间】：2016-10-17 17:26:03

【问题描述】：

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

让我分享我的代码

从 '@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"

这仅适用于设置，自定义组件不支持吗？

【参考方案1】：

要使这种紧凑的语法起作用，输入和输出需要遵循specific naming rules

[(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;
  

【讨论】：

因此最好将这些东西放在堆栈溢出上，无论如何它是我的主要文档来源。

接近部分angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way的末尾

感谢您的快速回复！

更新了 angular.io 文档部分的链接：angular.io/guide/template-syntax#two-way-binding---

更新了 angular.io 文档部分的更新链接：angular.io/guide/two-way-binding

【参考方案2】：

上面 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;

【讨论】：

Günter 的回答是重用 OP 的代码，但我认为对于仍然不太熟悉 Angular 语法的某些部分的其他人来说，你的回答更清楚。感谢您提供此示例！

这是我的意图 :) 感谢您的评论。