Question

给出以下标记：

<button class="btn" (click)="chain()" promiseDirective></button>

并假设我的chain()方法返回一个Promise，我想获取click绑定的表达式值，以便随后可以在我的指令中对其进行访问：

@Directive({
  selector: '[promiseDirective]'
})
export class PlPromisesDirective implements OnInit {
  @Input() promiseDirective: any;
  @Input() click: any; // Maybe get the value through here

  private subject: Subject<any>;
  private subscription: Subscription;

  constructor() {
    this.subject = new Subject<any>();
  }

  public ngOnInit(): void {
    this.subscription = this.subject
      .asObservable()
      .pipe(map(value => Promise.resolve<any>(value)))
      .subscribe(value => this.promiseHandler(value, this.$element));
  }

  @HostListener('click', ['$event'])
  public clickEventHandler(event: MouseEvent) {
    // And maybe access it here
    console.log(value);
  }
}

我尝试绑定click属性，但该值始终为undefined。

编辑

虽然@selem mn的答案令人满意，但我想避免需要使用第二个绑定来检测该值的变化，因为@Input() plPromise绑定已经可以实现此目的。

我真正需要的是一种直接监听(click)表达式结果的方法，这样我就可以使指令使用方式更加实用。

Answer 1

第一种方式

我认为，如果您依赖指令中的值，那么应该在此处实现该方法：

@Directive({
  selector: 'button[promiseDirective]'
})
 // ....
 @HostListener('click', ['$event'])
  public clickEventHandler(event: MouseEvent) {
    // Call your service here
  }

并从您的按钮标记中删除该(click)，因为您的指令将由@HostListener自行处理点击事件：

<button class="btn" promiseDirective></button>

第二种方式：

或者您可以在不更改方法核心的情况下添加另一个@Input，这意味着：

@Directive({
  selector: 'button[promiseDirective]'
})

@Input() valueOfPromise;
 // ....
 ngOnChanges() // <-- would be invoked once @Input() value is updated
    console.log(this.valueOfPromise);    
  }

不要忘记在指令类中导入并实现OnChanges接口，那么您的按钮片段应类似于：

<button [valueOfPromise]="returnedValue" (click)="chain()" class="btn" promiseDirective></button>

对于按钮的相关TS部分：

public returnedValue;

chain() {
 // Call your service
   this.returnedValue = data // <-- data is your returned data from service
}

这里您将不再需要@HostListener。

Angular-获取元素的单击绑定表达式

编辑

1 个答案:

第一种方式

第二种方式：