1

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

我做错什么了吗？

任何解决方案？

此致，

狮子座

4

1 回答 1

1

inputs每当this.aButtonDisabledor的值发生变化时，您都需要重新分配 的值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()方法

工作演示

于 2019-04-11T04:42:13.913 回答