子组件中的子组件中的按钮在父组件中发生事件后无需刷新页面以使该禁用生效

Question

我拥有的代码有效，但仅在页面刷新后有效。例如。我可以单击“继续”按钮，页面将刷新而不是在应用程序中继续前进，现在该按钮将被禁用。但是我要寻找的是，一旦从父组件的下拉列表中选择了某个值，就必须禁用该按钮。继续按钮是其自己的子组件，就像在应用程序中的许多其他组件中使用的那样。在角度版本6上。

ParentComponent.html

... //Select dropdown that sets the disableContinueButton value based on what is selected

<df-child-component
    [forwardOnly]="true"
    [isAppLoading]="isAppLoading"
    [forwardDisabled]="disableContinueButton$ | async"
    [submitButtonText]="'Continue'"
  >
</df-child-component>

ParentComponent.ts

export class ParentComponent implements OnChanges, OnInit {
      disableContinueButton$ = of(false);
      ...
      onSelectEvent(){ 
          //Sets the disableContinueButton flag based on what is selcted.
      }
}

ChildComponent.ts

import {
  Component,
  ChangeDetectionStrategy,
  Output,
  EventEmitter,
  Input,
} from '@angular/core';

@Component({
  selector: 'df-child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChildComponent {
  @Input()
  forwardOnly: boolean;
  @Input()
  isAppLoading: boolean;
  @Input()
  forwardDisabled: boolean;
  @Input()
  submitButtonText: string;

  @Output()
  back = new EventEmitter();
  @Output()
  forward = new EventEmitter();
}

ChildComponent.html

      <button
        type="Submit"
        class="btn btn-primary col-sm-2 order-1 order-sm-2 mb-2"
        (click)="forward.emit({})"
        [disabled]="isAppLoading || forwardDisabled"
        id="nav-continue"
      >
        {{ submitButtonText }}
      </button>

Answer 1

我无法复制此内容，但是我猜测您的更改检测由于某种原因未捕获更改。

我建议您使用BehaviourSubject或Subject而不是可观察的。

如果仍然不起作用，可以通过注入ChangeDetectorRef并在其上调用markForCheck / detectChanges来强制更改检测运行