Angular/TypeScript中如何避免变量未定义并获取@Input数据？

一、解决@Input数组无法获取的问题 #

Angular中@Input数据常为异步传入（比如父组件从接口加载后传递），ngOnInit执行时输入数据可能还未赋值，导致打印显示为空数组。可通过以下两种方式处理：

方式1：用ngOnChanges监听输入变化 #

实现OnChanges接口，在输入属性更新时触发逻辑：

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: "app-calendar",
  templateUrl: "./calendar.component.html",
  styleUrls: "./calendar.component.css"
})
export class CalendarComponent implements OnInit, OnChanges {
    @Input() rentalStartInput: string[] = [];
    @Input() rentalEndInput: string[] = [];
    rentalStart: Date = new Date(2023, 0, 1);
    rentalEnd: Date = new Date(2023, 0, 1);

    ngOnChanges(changes: SimpleChanges): void {
        // 监听租赁日期输入的变化
        if (changes['rentalStartInput'] || changes['rentalEndInput']) {
            this.updateRentalDates();
            // 重新生成日历数据
            this.getDaysFromDate(new Date().getMonth() + 1, new Date().getFullYear());
        }
    }

    ngOnInit(): void {
        // 初始化时尝试从输入取数据
        this.updateRentalDates();
        this.getDaysFromDate(new Date().getMonth() + 1, new Date().getFullYear());
    }

    updateRentalDates(): void {
        // 从输入数组取第一个元素转换为Date（假设数组首个元素为有效日期字符串）
        if (this.rentalStartInput.length > 0) {
            this.rentalStart = new Date(this.rentalStartInput[0]);
        }
        if (this.rentalEndInput.length > 0) {
            this.rentalEnd = new Date(this.rentalEndInput[0]);
        }
    }

    // 其他方法...
}

方式2：给@Input设置setter #

通过setter实时响应输入变化：

@Component({
  selector: "app-calendar",
  templateUrl: "./calendar.component.html",
  styleUrls: "./calendar.component.css"
})
export class CalendarComponent implements OnInit {
    private _rentalStartInput: string[] = [];
    @Input() set rentalStartInput(value: string[]) {
        this._rentalStartInput = value;
        this.updateRentalDates();
        this.getDaysFromDate(new Date().getMonth() + 1, new Date().getFullYear());
    }
    get rentalStartInput(): string[] {
        return this._rentalStartInput;
    }

    private _rentalEndInput: string[] = [];
    @Input() set rentalEndInput(value: string[]) {
        this._rentalEndInput = value;
        this.updateRentalDates();
        this.getDaysFromDate(new Date().getMonth() + 1, new Date().getFullYear());
    }
    get rentalEndInput(): string[] {
        return this._rentalEndInput;
    }

    rentalStart: Date = new Date(2023, 0, 1);
    rentalEnd: Date = new Date(2023, 0, 1);

    ngOnInit(): void {
        this.updateRentalDates();
        this.getDaysFromDate(new Date().getMonth() + 1, new Date().getFullYear());
    }

    updateRentalDates(): void {
        if (this._rentalStartInput.length > 0) {
            this.rentalStart = new Date(this._rentalStartInput[0]);
        }
        if (this._rentalEndInput.length > 0) {
            this.rentalEnd = new Date(this._rentalEndInput[0]);
        }
    }

    // 其他方法...
}

二、解决isInRange中变量未定义的问题 #

原代码中isInRange内重复赋值rentalStart/rentalEnd属于冗余操作，且若getDaysFromDate在变量赋值前执行，会导致判断时变量未更新。需做以下调整：

1. 移除isInRange内的硬编码赋值，直接使用组件实例的rentalStart/rentalEnd
2. 确保每次rentalStart/rentalEnd变化后，重新调用getDaysFromDate生成最新日历数据（已在上述代码中实现）

修改后的isInRange方法：

isInRange(day: number, month: number, year: number) {
    const rangeDay = new Date(year, month - 1, day); 
    const rentalRange = moment.range(this.rentalStart, this.rentalEnd);
    return rentalRange.contains(rangeDay);
} 

三、额外注意事项 #

• TypeScript中字符串类型推荐用小写string（基本类型），而非大写String（包装对象）
• 初始化Date时，new Date(2023-1-1)会先计算2023-1-1=2021，实际创建的是new Date(2021)，正确写法是new Date(2023, 0, 1)（月份从0开始计数）
• 若父组件传入的日期字符串格式不标准，建议用moment解析：this.rentalStart = moment(this.rentalStartInput[0]).toDate();

内容的提问来源于stack exchange，提问作者Mia