输入不适用于动态组件

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

输入不适用于动态组件

Inputs was not working by dynamic component

angular

angular-dynamic-components