动态组件无法使用输入

Question

我使用 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>

我做错了吗？

有什么解决办法吗？

最好的问候，

狮子座

Answer 1

每当this.aButtonDisabled 或this.bButtonDisabled 的值发生变化时，您都需要重新分配inputs 的值。

您的主要静态组件 - 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() 方法

Working Demo