Angular 将值绑定到指令参数

Question

我正在构建一个指令，该指令在条件保持为真时更改按钮的文本。例如，在保存一个 from 时，在处理它之前，提交按钮的文本应更改为 Saving...，并且在表单提交完成后，它应恢复为原始文本。

这是我正在尝试的：

import {Directive, ElementRef, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[LoadingText]'
})
export class LoadingTextDirective implements OnInit {

  @Input('loadingTextValue') text: string;
  @Input('loadingTextWhen') condition: boolean;

  constructor(private elem: ElementRef) {}

  ngOnInit() {
    if (this.text && this.condition) {
        this.elem.nativeElement.innerText = this.text;
    }
  }
}

以下是我的使用方法：

<button LoadingText loadingTextValue="Hold on! Saving..." [loadingTextWhen]="saving" type="button" (click)="onSave()">Save
                            </button>

saving: boolean = false;

我在调用 onSave() 函数时将 saving 更改为 true，在它完成时更改为 false。

如何绑定我的指令条件输入以根据 saving 上的更改反映？

Answer 1

您可以通过 Angular 使用 ngOnChanges 生命周期挂钩来获取 @Input 绑定中的更改。

import {Directive, ElementRef, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[LoadingText]'
})
export class LoadingTextDirective implements OnInit, OnChanges {

  @Input('loadingTextValue') text: string;
  @Input('loadingTextWhen') condition: boolean;

  constructor(private elem: ElementRef) {}

  ngOnInit() {
    if (this.text) {
      if (this.condition) {
        this.elem.nativeElement.innerText = this.text;
      }
    }
  }

  ngOnChanges(changes) {
    console.log(changes.condition.currentValue);
    this.condition = changes.condition.currentValue;
    if (this.text) {
      if (this.condition) {
        this.elem.nativeElement.innerText = this.text;
      }
      else {
        this.elem.nativeElement.innerText = 'Save'
      }
    }
    // you will get changes in `@input` text here and made changes accordingly
  }
}

Working example

Answer 2

您可以使用主题变量：

在你的组件中 HTML:

<label [loadingTextValue]="loadValue"></label>

在您的组件 TS 中：

loadValue = new Subject();

changeValue() {
   this.loadValue.next('Your_Value');
}

在指令中：

@Input('loadingTextValue') text: Subscription;

  constructor(
    private el: ElementRef
  ) {
  }

ngOnInit() {
    this.subscribe = this.text
      .subscribe(value => {
        this.el.nativeElement.innerText = value;
      })
  }

Angular 将值绑定到指令参数

Angular Bind a value to Directive parameter

angular

angular5

angular6