Angular 将值绑定到指令参数

我正在构建一个指令，在条件保持为真的情况下更改按钮的文本。例如，在保存来自的表单时，在处理之前，“提交”按钮的文本应更改为

保存…

，表单提交完成后，应恢复为原始文本

以下是我正在尝试的：

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;

保存
保存：布尔值=false；

当调用onSave（）函数时，我将

保存

更改为true，当它完成时更改为false

---

如何绑定我的指令条件输入以根据

保存

上的更改进行反映？

您可以使用

ngOnChanges

生命周期钩子按角度获取

@输入

绑定中的更改

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
  }
}

---

您可以使用主题变量：

在组件HTML中：

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

在指令中：

@Input('loadingTextValue') text: Subscription;

  constructor(
    private el: ElementRef
  ) {
  }

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

---

Ref:

实现OnInit，OnChanges

。我知道这是一天结束时的JavaScript。没关系。但建议在角度编码样式指南中使用。：）@利特威基，鹰眼！！谢谢老兄指点我，回答更新！！在本例中，在ngOnInit之前调用ngOnChanges。我在ngOninit中得到元素的初始值，但它给出的是未定义的。@Subhan，

ngOninit

总是在

ngOninit

之前调用，

ngOninit

，因此您可以从两个循环挂钩中调用一些常用方法。谢谢，我会尝试。这真的很有帮助。

@Input('loadingTextValue') text: Subscription;

  constructor(
    private el: ElementRef
  ) {
  }

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