Angular 使用指令连接两个输入值

我想根据其他表单值“自动填充”输入。“id”应该是“name”+“combo”：

值1
价值2

这是我的指示：

@Directive({
  selector: '[autoFillId]'
})

export class AutoFillDirective {

 @Output() idValue: EventEmitter<string> = new EventEmitter();
 value: string = ".";

@HostListener('input', ['$event']) onInputChange($event) {
  this.value = this.value.split(".")[0] + "." + $event.target.value;
  this.idValue.emit(this.value);
}

@HostListener('change', ['$event']) onChange($event) {
  this.value = $event.value + "." + this.value.split(".")[1];
  this.idValue.emit(this.value);
}

}

@指令({
选择器：“[autoFillId]”
})
导出类自动填充指令{
@Output（）idValue:EventEmitter=新的EventEmitter（）；
值：string=“.”；
@HostListener（'input'，['$event']）onInputChange（$event）{
this.value=this.value.split（“.”[0]+“+$event.target.value；
this.idValue.emit（this.value）；
}
@HostListener（'change'，['$event']）onChange（$event）{
this.value=$event.value+“+”this.value.split（“.”[1]；
this.idValue.emit（this.value）；
}
}

它可以单独工作，我的意思是，如果我在更改组合时得到“undefined.2”，或者在更改输入时得到“myName.undefined”

---

我怎样才能一起做呢？

所以，我花了一点时间来测试和调试您的代码，我发现：

1）您正在调用指令的两个不同实例

您正在组合和输入中调用

autoFillId

，因此它们中的每一个都有一个不同的指令实例。这意味着它们都将有一个不同的

this.value

实例，并且由于这两个实例之间从不共享该值，因此始终只有一个实例在工作

2）

select

触发输入和更改事件

@HostListener('change', ['$event']) onChange($event) {
  this.value = $event.value + "." + this.value.split(".")[1];
  this.idValue.emit(this.value);
}

currentId = "."

getId(event) {
  this.currentId = event;
}

@Directive({
  selector: '[autoFillId]'
})

export class AutoFillDirective {

  @Output() idValue: EventEmitter<string> = new EventEmitter();
  //This input will load the value of the ID when changed
  @Input('autoFillId') value: string;

  @HostListener('input', ['$event']) onInputChange($event) {
    /* We need to check if the event is triggered by the input or the select
       We can do this by checking the constructor name for example.
    */
    if($event.constructor.name === 'InputEvent') {
      this.value = this.value.split(".")[0] + "." + $event.target.value;
    } else {
      this.value = $event.target.value + "." + this.value.split(".")[1];
    }
    this.idValue.emit(this.value);
  }

}

这将在单击选择按钮时触发

@HostListener('input', ['$event']) onInputChange($event) {
  this.value = this.value.split(".")[0] + "." + $event.target.value;
  this.idValue.emit(this.value);
}

这将在选择选项时触发。 这就是导致出现未定义的

的原因

有多种解决方案可以解决您的问题，如果您希望将此行为保留在指令上，则必须将更改后的值传递给该指令的其他实例



autofill.directive.ts

@HostListener('change', ['$event']) onChange($event) {
  this.value = $event.value + "." + this.value.split(".")[1];
  this.idValue.emit(this.value);
}

currentId = "."

getId(event) {
  this.currentId = event;
}

@Directive({
  selector: '[autoFillId]'
})

export class AutoFillDirective {

  @Output() idValue: EventEmitter<string> = new EventEmitter();
  //This input will load the value of the ID when changed
  @Input('autoFillId') value: string;

  @HostListener('input', ['$event']) onInputChange($event) {
    /* We need to check if the event is triggered by the input or the select
       We can do this by checking the constructor name for example.
    */
    if($event.constructor.name === 'InputEvent') {
      this.value = this.value.split(".")[0] + "." + $event.target.value;
    } else {
      this.value = $event.target.value + "." + this.value.split(".")[1];
    }
    this.idValue.emit(this.value);
  }

}

@指令({
选择器：“[autoFillId]”
})
导出类自动填充指令{
@Output（）idValue:EventEmitter=新的EventEmitter（）；
//此输入将在更改时加载ID的值
@输入（'autoFillId'）值：字符串；
@HostListener（'input'，['$event']）onInputChange（$event）{
/*我们需要检查事件是由输入还是选择触发的
例如，我们可以通过检查构造函数名称来实现这一点。
*/
如果（$event.constructor.name=='InputEvent'）{
this.value=this.value.split（“.”[0]+“+$event.target.value；
}否则{
this.value=$event.target.value+“+this.value.split（“.”[1]；
}
this.idValue.emit（this.value）；
}
}

给你。
您可以在这里查看工作示例：
您在哪里使用
idValue
输出？我忘了，编辑您的模板引用变量
\idValue
如何与
@output
连接？