Передача данных в дочерний компонент через @Input не вызывает ngOnChanges и данные не передаются - PullRequest
Новая
       66

Передача данных в дочерний компонент через @Input не вызывает ngOnChanges и данные не передаются

0 голосов
/ 24 марта 2020

Я пытаюсь передать данные из родительского компонента в дочерний компонент. Тот же код работал без сбоев до того, как я обновился до angular 9, я даже ничего не изменил в коде этой части.

вот родительский компонент html template: 

<tk-dynamic-form-builder [queryableFields]="['something' , 'somethingElse']" [fieldsData]="fieldsData"></tk-dynamic-form-builder>
<button type="button" (click)="reset()" class="reset-button" aria-label="Search" [disabled]="loading">
    <span *ngIf="!loading">Reset</span>
</button>
<button type="button" (click)="search()" class="submit-button" aria-label="Search" [disabled]="loading">
    <span *ngIf="!loading">Search</span>
    <span *ngIf="loading">Searching... <i class='fas fa-spinner fa-pulse'></i></span>
</button>

вот код, относящийся к дочерним компонентам: 

@Component({
    selector: 'tk-dynamic-form-builder',
    templateUrl: './dynamic-form-builder.component.html',
    styleUrls: ['./dynamic-form-builder.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicFormBuilderComponent implements OnInit, OnChanges {

    @Input() queryableFields: any[];

    dateFormat: string;
    public myForm: FormGroup;
    public numberOfRows: number;
    public richTextFields: any[];




    formFields: any[] = [];        // is the array of fields objects
    formBuilderParameters: any;    // parameters given to formbuilder.group
    formFieldIds: string[] = [];   // is an array that represents only the formFieldIds
    numberOfColumns: number;
    @Input() fieldsData: any[];    // is the data in the form fields which gets presented on update
    @Input() isViewMode = false;

    constructor(private dateFormatService: DateFormatService,
        private fb: FormBuilder,
        private http: HttpClient,
        private main: MainService,
        private store: Store<DynamicProgramLibState>) {

    }

    ngOnInit(): void {
        console.log("dynamic form builder initiated");
        this.store.pipe(select('loginState', 'formats')).subscribe(data => {
            this.dateFormat = data.dateFormat;
        });



    }

    ngOnChanges(): void {

        console.log("ngOnChanges Triggered");
        if (this.queryableFields) {
        //etc...
    }

    }

}

приложение обслуживается и работает без ошибок, но ngOnChanges в дочернем компоненте никогда не запускается ни разу, хотя этот код используется работать до обновления до angular 9. Еще одна вещь, на которую следует обратить внимание, это то, что этот метод передачи данных работает не во всем проекте, а не только в этом примере кода.

любые предложения или рекомендации будут весьма полезны оценили

1 Ответ

1 голос
/ 24 марта 2020

Это странно, как это работало раньше, но не сейчас.

Я также вижу, что у вас есть changeDetection: ChangeDetectionStrategy.OnPush, это меняет его по умолчанию.

Независимо от того, если оно Default или OnPush, когда вы изменяете queryableFields и fieldsData, изменяйте их в своей родительской функции. В основном, измените расположение адреса в памяти для ссылочных типов (массивов или объектов), чтобы обнаружение изменений имело место.

Так что в вашем родительском компоненте всякий раз, когда queryableFields изменения делают: 

this.queryableFields = [...this.queryableFields, newValueHere];
// OR map for transformation
this.queryableFields = this.queryableFields.map(....); // map for a new reference
// OR filter for reduction
this.queryableFields = this.queryableFields.filter(....); // filter for a new reference

То же самое относится и к fieldsData.

...