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

每当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()方法

Working Demo

输入不适用于动态组件

1 个答案: