typescript - Se till att alla beroende @Inputs är tillgängliga i barnkomponenten i Angular
Metod i min NG-komponent beror på 2 @Input-egenskaper och prenumeration på ruttändringar. Den nuvarande implementeringen orsakar periodvis ett fel när this.items ännu inte har mottagits (den är undefined) men revenuesStreamsTotalCalculations redan får värden med OnChanges eller tvärtom och extra omberäkning. Jag behöver någon lösning för att säkerställa att jag får ALLA aktuella beroenden. Jag har redan försökt att slå in @Input-egenskaperna i Observable i föräldrakomponenten och kombinera beroenden med combineLatest eller zip, men det verkar för omständligt. Kan någon ge råd om några andra möjliga lösningar?
export class PlanGroup implements OnInit, OnChanges, OnDestroy {
@Input() items;
@Input() revenuesStreamsTotalCalculations;
constructor(private _route: ActivatedRoute) {}
ngOnChanges(changes: SimpleChanges) {
const { items, revenuesStreamsTotalCalculations } = changes;
if (items && items.currentValue) {
this.calculateMetricsInformation(this.items, this.year, this.revenuesStreamsTotalCalculations);
}
if (revenuesStreamsTotalCalculations && revenuesStreamsTotalCalculations.currentValue) {
this.calculateMetricsInformation(this.items, this.year, this.revenuesStreamsTotalCalculations);
}
}
ngOnInit() {
this.route = this._route.params.pipe(
takeUntil($unsubscribe),
filter(p => p["year"])
).subscribe(p => {
this.year = p["year"]
if (this.revenuesStreamsTotalCalculations) {
this.calculateMetricsInformation(this.items, this.year, this.revenuesStreamsTotalCalculations);
}
});
}
calculateMetricsInformation(items, year, revenuesStreamsTotalCalculations) {
// ...implementation
}
}
Svar #1
Använder
<plan-group
*ngIf="items && revenuesStreamsTotalCalculations"
[items]="items"
[revenuesStreamsTotalCalculations]="revenuesStreamsTotalCalculations">
</plan-group>
i din föräldrakomponent bör göra susen - PlanGroup-komponenten kommer aldrig att initieras.
Också om både items och revenuesStreamsTotalCalculations är nödvändiga kan du flytta dina kontroller till calculateMetricsInformation-metoden:
calculateMetricsInformation(items, year, revenuesStreamsTotalCalculations) {
if (!items || !revenuesStreamsTotalCalculations) {
return []; // or other empty value
}
//... implementation
}
