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

Я реализовал с помощью 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>

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

любые решения?

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

Лео


angular angular-dynamic-components
person user1938143    schedule 11.04.2019    source источник
comment
Можете ли вы создать репродукцию на stackblitz.com? Я предполагаю, что вам нужно вручную вызвать обнаружение изменений после настройки ввода.   -  person alt255    schedule 11.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вам необходимо переназначить значение 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() также

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

person Sreekumar P    schedule 11.04.2019
comment
Я пробовал ваше решение, но оно не помогло. - person user1938143; 11.04.2019
comment
можешь добавить рабочий образец? надеюсь, у вас есть закрытие </ng-container>. Здесь он работает: stackblitz. ru / edit / - person Sreekumar P; 11.04.2019
comment
да, этот пример я тоже нашел и реализовал именно такой, как этот. - person user1938143; 11.04.2019
comment
Я пробовал, если я изменил код с помощью aButtonDisabled: boolean; bButtonDisabled: логический; input = {disabledAView: true, disabledBView: ture}; Оно работает - person user1938143; 11.04.2019
comment
Я думаю, что входы не могут слушать изменения от переменных - person user1938143; 11.04.2019
comment
когда вы вызываете мой метод onAButtonChange()? - person Sreekumar P; 11.04.2019
comment
вы можете привести мне полный пример? - person user1938143; 11.04.2019
comment
Большое спасибо ... попробую ваше решение в своем приложении - person user1938143; 11.04.2019
comment
@SreekumarP У меня есть вопрос, в настоящее время я использую ng-dynamic-component для использования различных типов виджетов на панели инструментов, мой вопрос заключается в следующем: если я изменю входные данные в дочернем элементе (виджете), изменения будут отражены в родительском (дашборд)? Если нет, как я могу с этим справиться? - person Jessy; 27.11.2019
comment
@Jessy: вам нужно использовать Output для общения от ребенка к родителю. Взгляните на переменную output в appcomponent и как она используется = ›Я обновил рабочую демонстрацию с помощью output также stackblitz.com/edit/ - person Sreekumar P; 28.11.2019