Angular: данные не передаются дочернему компоненту после успешного вызова от родителя

Question

У меня есть родительский и дочерний компоненты.

В дочернем компоненте у меня есть кнопка, как показано ниже.

//child.component.html

<button mat-raised-button  [disabled]="!form.valid || submitButtonDisable" type = 'Submit' color='primary'  >
{{generateButton}}
</button>


//child.component.ts
@Output() onGenerateReport: EventEmitter<any> = new EventEmitter<any>();
@Input() generateButton: String;

OnSubmit() {
  this.onGenerateReport.emit(this.parameterRequest);  // paasing data to parent after button click
  this.submitButtonDisable = true;
  this.generateButton = 'Generating...'
  }

Ниже представлен родительский компонент

  // parent component.html

  <child-component
      (onGenerateReport)="handleGenerateReport($event)"
      [generateButton] = "generateButton | async">
  </child-component>

    //parent.component.ts
 generateButton: Observable<String >;

   handleGenerateReport($event: ParameterRequest) {  //  event trigerred

        this.store.dispatch(new fromStore.SendRequest($event));

    this.store.select(fromStore.isDataLoaded).pipe(take(1)).subscribe(data => {
    if(data) {
    this.generateButton = of('Generate');   // this data not passing to child
   }
 })
}

После успешного вызова я передаю данные ребенку, чтобы изменить метку кнопки.

Но ngrx select, данные не передаются дочернему элементу .Я что-то упустил?

Answer 1

Вам нужно использовать ngOnChanges для потомка, чтобы обнаружить это изменение от родителя.Вы должны использовать приведенный ниже код в своем дочернем компоненте.

import { OnChanges, SimpleChanges } from '@angular/core';
class childComponent implements OnChanges, OnInit, AfterViewInit {    
//child.component.ts
@Output() onGenerateReport: EventEmitter<any> = new EventEmitter<any>();
@Input() generateButton: String;

ngOnChanges(changes: SimpleChanges): void { 
  if(changes != null) {
    console.log(changes);   // here in changes object you will get the updated value of your input variables ex:  generateButton  
  }        
}

OnSubmit() {
   this.onGenerateReport.emit(this.parameterRequest);  // paasing data to parent after button click
   this.submitButtonDisable = true;
   this.generateButton = 'Generating...';}}

Answer 2

Просто выполните следующие шаги

• Просто импортируйте import { Input, OnChanges, SimpleChanges } from '@angular/core'; пакет.
• Затем реализуйте интерфейс export class ComponentName implements OnChanges
• Затем просто создайте функцию ngOnChanges(changes: SimpleChanges){ // changes.your input property name (contains the old and the new value) // here you can getting all @Input property changes. }