Входы не работали по динамическому компоненту - PullRequest
Новая
       277

Входы не работали по динамическому компоненту

0 голосов
/ 11 апреля 2019

Я реализовал с помощью ndc-dynamic для создания динамического компонента.

Очень хорошо работает с выходами, но входы не работали.

Я покажу свой код. 

 <ng-container *ngComponentOutlet="item.widgetComponent; ndcDynamicInputs: inputs; ndcDynamicOutputs: outputs">

в файле ts 

 aButtonDisabled: boolean;
  bButtonDisabled: boolean;
  inputs = {
    disabledAView: this.aButtonDisabled,
    disabledBView: this.bButtonDisabled
  };

эти два кода находятся в родительском компоненте.

дочерний компонент: 

 @Input() disabledVehicleAView: boolean;
  @Input() disabledVehicleBView: boolean:

и в HTML 

  <mat-grid-tile>
        <button [disabled]="disabledVehicleBView">
       </button>
      </mat-grid-tile>
      <mat-grid-tile>
        <button  [disabled]="disabledVehicleAView">
          </button>
      </mat-grid-tile>

Я сделал что-то не так?

какие решения?

С наилучшими пожеланиями,

Leo

1 Ответ

1 голос
/ 11 апреля 2019

Вам необходимо переназначать значение inputs всякий раз, когда меняется значение this.aButtonDisabled или this.bButtonDisabled.

Ваш основной статический компонент - HTML 

<input type="checkbox" class="example-margin" [(ngModel)]="aButtonDisabled" (ngModelChange)="onAButtonChange($event)"/>aButtonDisabled 
<input type="checkbox" class="example-margin" [(ngModel)]="bButtonDisabled" (ngModelChange)="onBButtonChange($event)"/>bButtonDisabled

<ng-container 
               *ngComponentOutlet="component; 
               ndcDynamicInputs: inputs; 
               ndcDynamicOutputs: outputs"></ng-container>

Ваш основной статический компонент - методы TS 

onAButtonChange() {
    console.log(this.aButtonDisabled)
    this.inputs = {
      ...this.inputs,
      ...{ disabledVehicleAView: this.aButtonDisabled }
    }
  }

  onBButtonChange() {
    console.log(this.bButtonDisabled)
    this.inputs = {
      ...this.inputs,
      ...{ disabledVehicleBView: this.bButtonDisabled }
    }
  }

onAButtonChange или onAButtonChange могут быть вызваны, когда пользователь изменяет значение из элемента управления, например, флажок onChange событие.В вашем случае это может быть не флажок, а то, как вы можете изменить значение this.aButtonDisabled, тогда вызовите также метод onAButtonChange()

Рабочая демонстрация

...