Кнопка отключения в дочернем компоненте после события в родительском компоненте без необходимости обновлять sh страницу, чтобы отключение вступило в силу - PullRequest
Новая
       14

Кнопка отключения в дочернем компоненте после события в родительском компоненте без необходимости обновлять sh страницу, чтобы отключение вступило в силу

0 голосов
/ 27 мая 2020

Код у меня работает, но только после обновления страницы. Например, я могу нажать кнопку «Продолжить», и страница обновится sh вместо того, чтобы двигаться вперед в приложении, и теперь кнопка будет отключена. Но то, что я ищу, - это отключить кнопку, как только определенное значение будет выбрано из раскрывающегося списка родительского компонента. Кнопка продолжения является его собственным дочерним компонентом, так как она используется во многих других компонентах приложения. В angular версии 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>

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

с использованием ViewChild позволит вам запускать функцию в дочернем компоненте из родительского компонента.

0 голосов
/ 27 мая 2020

Я не могу воспроизвести это, но предполагаю, что ваше обнаружение изменений по какой-то причине не фиксирует изменение.

Я предлагаю вам использовать BehaviorSubject или Subject вместо наблюдаемого: 

export class ParentComponent implements OnChanges, OnInit {
      disableContinueButton$ = new BehaviourSubject(false);
      ...
      onSelectEvent(){ 
          this.disableContinueButton.next(true); // true or false
      }
}

Если это все еще не работает, вы можете принудительно запустить обнаружение изменений, введя ChangeDetectorRef и вызвав на нем markForCheck или detectChanges: 

export class ParentComponent implements OnChanges, OnInit {
    constructor(private readonly _changeDetectorRef: ChangeDetectorRef) { }

    onSelectEvent(){
        // Update the value
        this._changeDetectorRef.markForCheck();
    }
}
...