在子組件和父組件之間傳遞數據

Question

在我的 angular 應用程序中。 我正在使用子組件和父組件。 我想將數據從我的父組件傳遞到子組件。 我能夠做到。 我有更多數據要傳遞給子組件。 而不是對每個值使用 Input 屬性。 我只想使用一個 Input 並用它傳遞更多值。 可能嗎？。 請指導我。

我嘗試以數組的形式傳遞多個輸入值。問題是我在 childComponent onInit 中實現表單。

父組件 HTML

<form class="parentForm" [formGroup]="parentForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test0"
        />
      </div>
    </div>
  </div>
  <app-child
    [childForm]="parentForm.controls.childForm"
    [Test0]="Test"
    [Test1]="Test1"
    [Test2]="Test2"
    [Test3]="Test3"
    [Test4]="Test4"
    [Test5]="Test5"
  ></app-child>
</form>

子組件 TS

@Input() Test: any;
@Input() Test1: any;
@Input() Test2: any;
@Input() Test3: any;
@Input() Test4: any;
@Input() Test5: any;

子組件 HTML

<form [formGroup]="childForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12" *ngIf="( Test === 't1')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test"
        />
      </div>
      <div class="col-md-12" *ngIf="(Test1 === 't2')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test1"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test2 === 't3')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test2"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test3 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test4 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test5 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
    </div>
  </div>
</form>

Answer 1

您可以直接在輸入中傳遞 object。

像這樣的東西應該工作

父組件.ts

let ultimate_test = {"Test":"t1","Test1":"t2"...}

父組件.html

<app-child [childForm]="parentForm.controls.childForm" [ultimate_test]="ultimate_test"></app-child>

子組件.ts

@Input() ultimate_test: any;

ChildComponent.html

<form  [formGroup]='childForm'>
  <div class="col-md-12" >
    <div class="row">
      <div class="col-md-12" *ngIf ="( ultimate_test.Test === 't1')">
        <input class="" type="text" placeholder=" info" formControlName="test">
      </div>
      <div class="col-md-12" *ngIf ="( ultimate_test.Test1 === 't2')">
        ...
      </div>
    </div>
  </div>
</form>

編輯

我建議您將ultimate_test指定為formControlName的值。 通過這種方式，您可以使用 Pipe 迭代子組件上的值並將您的值直接添加到formControlName屬性。 您不必在每個輸入處都使用*ngIf 。