Обнаружение изменений в HTML дочернего компонента от родительского компонента в Angular - PullRequest
Новая
       29

Обнаружение изменений в HTML дочернего компонента от родительского компонента в Angular

0 голосов
/ 13 июня 2018

Итак, у меня есть родительский компонент, скажем 

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

export class ChildComponent {

  public responseData: any;

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

  - - - - -
}

Мой дочерний компонент выглядит примерно так: 

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

export class ChildComponent {
   @Input
    inputData: any;

   - - - - -
}

Мой HTML-код дочернего компонента имеет поле выбора 

<select> 
  <option disabled
    value=""
    selected> Select
  </option>
  <option *ngFor="let val of values"
          [value]="val.key"> {{val.name }}
  </option>
</select>

Таким образом, каждый раз, когда в «select» выбирается «option», я хочу получать разные данные из родительского компонента в качестве входных данных для дочернего компонента.То есть «responseData» для отправки в качестве входных данных для дочернего компонента отличается для разных выбранных «option».

В моем сценарии родительский компонент является своего рода преобразователем данных, который отправляет разные данные на основе параметров, выбранных в child.component.

Итак, как мне определить, что выбран другой параметр "option" в поле "select", и отправить ключ с вложенным параметром "option" в родительский компонент, чтобы получить разные "responseData"

1 Ответ

0 голосов
/ 13 июня 2018

в дочернем компоненте, добавьте выходной декоратор следующим образом: 

@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 code 

@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);
  }
  - - - - -
}
...