Question

父组件标记：

<full-screen-dialog-header (onClickPrimaryAction)="onClickSaveCustomer()"
  (primaryActionDisabled)="*ngIf=customerFormGroup.enabled && !customerFormGroup.valid">
</full-screen-dialog-header>

子组件：

export class FullScreenDialogHeaderComponent {

  @Input() primaryActionDisabled: Observable<boolean>;
  @Output() onClickPrimaryAction = new EventEmitter();

  public onClickPrimaryActionEvent($event) {
    this.onClickPrimaryAction.emit($event);
  }
}

儿童加价

...
<button mat-button (click)="onClickPrimaryActionEvent($event)" 
[disabled]="primaryActionDisabled">{{primaryActionText}}</button>
...

我想让@Input() primaryActionDisabled: Observable<boolean>工作。

我的问题和预期的行为是：

当我尝试简单(primaryActionDisabled)="!customerFormGroup.valid"时，在父标记中 - 我希望孩子的primaryActionDisabled包含!customerFormGroup.valid结果的可观察值，但不是。

Answer 1

首先，在使用[primaryActionDisabled]装饰器时，您应该使用// in parent controller primaryActionDisabled$ = new BehaviorSubject<boolean>(true); // disabled by default // in parent template <full-screen-dialog-header (onClickPrimaryAction)="onClickSaveCustomer()" [primaryActionDisabled]="primaryActionDisabled$"> </full-screen-dialog-header>绑定。

然后你需要在那里传递observable，而不是表达式：

primaryActionDisabled$.next(newBoolValue);

然后，每当值发生变化时，您都需要调用customerFormGroup.enabled && !customerFormGroup.valid（因此每次表达式<button mat-button (click)="onClickPrimaryActionEvent($event)" [disabled]="primaryActionDisabled | async">{{ primaryActionText }}</button>都会更改值时）。这将在您的父组件中再次处理。

最后，在您的子组件中，使用异步管道来处理该observable的值：

AsynchronousFileChannel

如何在子组件的元素上实现* ngIf / disabled，以父组件为基础

1 个答案: