Question

请考虑以下代码：

 <button cdtSaving type="submit" class="btn btn-default" [disabled]="!canSave()">Save</button>

使用cdtSaving属性指令：

@Directive({
  selector: '[cdtSaving]'
})
export class SavingDirective implements OnInit, OnDestroy {

  private subscription: Subscription;

  constructor(private _loaderService: LoaderService, private _elRef: ElementRef, private _renderer: Renderer2) { }

  ngOnInit() {
    // subscribe to the service state to hide/show the loader
    this.subscription = this._loaderService.loaderState
      .subscribe((state: LoaderState) => {
        this._renderer.setAttribute(this._elRef.nativeElement, 'disabled', state.show ? 'true' : null);
        console.log(`state changed:${state.show} for element ${this._elRef.nativeElement.textContent}`);
      });
  }

  ngOnDestroy() {
    // unsubscribe
    this.subscription.unsubscribe();
  }
}

基本上每当调用observable next（）时，我们启用或禁用按钮（nativeElement）。

问题是，当将disabled属性设置为null时，不再考虑canSave方法。

所以我想在指令中设置一个标志为true / false而不是设置disabled属性然后我会读取这样的标志：

 <button cdtSaving type="submit" class="btn btn-default" [disabled]=" cdtSaving.myFlag || !canSave()">Save</button>

目前cdtSaving.myFlag不起作用但也许有一种方法可以用Angular来实现吗？

Answer 1

如果要访问指令内部状态，则需要在exportAs装饰器中设置@Directive()元数据。

此外，disabled和ElementRef Renderer属性的命令管理也不需要。只需使用@HostBinding装饰器。

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

@Directive({
  selector: '[cdtSaving]',
  exportAs: 'cdtSaving'
})
export class SavingDirective {
  myFlag = false
}

用法：

<button cdtSaving  #dir="cdtSaving" [disabled]="dir.myFlag">Save</button>

Angular 4：来自主机的Access属性指令

1 个答案: