Question

所以我有一个父组件说

void "generate document"() {
    given: "generate document"
        def TemplateService = new TemplateService()

    when:
        def result = TemplateService.getDocument(inputs, idTemp)

    then:
        result != null
        result.size() > 0   

    where:
       inputs = [ "input", "input", "input"]
        idTemp =  "12AD"
}

我的孩子组件是这样的

@Component({
  selector: 'parent-comp'
  template: '<child-comp [inputData]="responseData"></child-comp>
})

export class ChildComponent {

  public responseData: any;

  getData() {
    this.responseData = getDataFromSomeService();
  }

  - - - - -
}

我的子组件html有一个选择框

@Component({
  selector: 'child-comp'
  templateUrl: 'someUrl'
})

export class ChildComponent {
   @Input
    inputData: any;

   - - - - -
}

因此，每次在“select”中选择“选项”时，我希望从父组件获取不同的数据作为子组件的输入。也就是说，作为输入到子组件的“responseData”对于所选择的不同“选项”是不同的。

在我的场景中，父组件是一种数据转换器，它根据子组件中选择的选项发送不同的数据。

那么如何检测选择“选择”框中的不同“选项”并将附带“选项”的密钥发送到父组件以获得不同的“responseData”

Answer 1

在子组件中

，添加输出装饰器，如下所示：

@Component({
  selector: 'child-comp'
  templateUrl: 'someUrl'
})

export class ChildComponent {
   @Input
    inputData: any;

   @Output onSelectChange = new EventEmitter<string>();

   onSelectedOptionChanged($event) {
      // trigger the event to parent.
      this.onSelectChange.emit($event.target.value);
   }
   - - - - -
}

并在子组件模板中

<select (change)='onSelectedOptionChanged($event)'> 
  <option disabled
    value=""
    selected> Select
  </option>
  <option *ngFor="let val of values"
          [value]="val.key"> {{val.name }}
  </option>
</select>

在父.ts代码中

@Component({
  selector: 'parent-comp'
  template: '<child-comp [inputData]="responseData" 
            (onSelectChange)='changeResponseData(data)></child-comp>
})



export class ChildComponent {


  public responseData: any;

  getData() {
    this.responseData = getDataFromSomeService();
  }

  changeResponseData(newDate) {
      console.log('new selected option is', newData);
  }
  - - - - -
}

检测Angular中父组件的子组件的HTML更改

1 个答案: