通过@Input 将数据传递给子组件不会触发 ngOnChanges 并且数据不会被传递

Question

我正在尝试将数据从父组件传递到子组件。在我升级到 Angular 9 之前，相同的代码可以完美运行，我什至没有更改这部分代码中的任何内容。

这里是父组件的html模板：

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

这里是子组件相关的ts代码：

@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 之前，相同的代码曾经可以工作。 还有一点需要注意的是，这种传递数据的方法在整个项目中都不起作用，而不仅仅是在这个代码示例中。

任何建议或建议将不胜感激

Answer 1

这很奇怪，它以前是如何工作的，但现在不是。

我还看到你有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 也是如此。