javascript - 通过 @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。