Angular中如何使用@Input传入值初始化组件内部pages数组

Angular组件的@Input()输入属性赋值时机晚于构造函数执行时机：构造函数运行时，父组件绑定的输入值还未写入组件实例，此时访问this.page会得到undefined，直接传入Array()无法生成预期长度的数组。

将依赖输入属性的数组初始化逻辑，从构造函数迁移到ngOnInit生命周期钩子中执行。ngOnInit是Angular提供的组件生命周期节点，该钩子触发时所有组件输入属性已经完成绑定，可以拿到正确的page传入值。
修正后的完整代码如下：

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

@Component({
  selector: 'app-hello',
  template: '' // 替换为实际组件模板内容
})
export class HelloComponent implements OnInit {
  @Input() page: number;

  active = 0;
  pages: number[];

  ngOnInit(): void {
    this.pages = Array(this.page)
      .fill(0)
      .map((_, index) => index);
    this.pages.pop();
  }

  get currentPage(): number {
    return this.active;
  }
}

• 如果父组件会动态修改传入的page值，需要新增ngOnChanges生命周期钩子监听输入属性变更，每次page更新时重新生成pages数组，避免页码展示和实际传入值不匹配。
• 可以给数组初始化逻辑增加边界判断，避免page未传入、传入值小于1时生成异常数组。
• 原链式调用Array(n).fill(0).map((_,i)=>i).pop()最终会得到长度为n-1、元素为0到n-2的数组，如果实际需要生成从1开始的自然序页码数组，可以直接用Array.from({length: this.page}, (_,i) => i+1)实现，省去fill、pop的冗余调用，逻辑更直观。

适配动态输入场景的参考代码：

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

@Component({
  selector: 'app-hello',
  template: ''
})
export class HelloComponent implements OnInit, OnChanges {
  @Input() page: number;

  active = 0;
  pages: number[] = [];

  ngOnInit(): void {
    this.buildPagesArray();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['page']) {
      this.buildPagesArray();
    }
  }

  private buildPagesArray(): void {
    if (!this.page || this.page < 1) {
      this.pages = [];
      return;
    }
    this.pages = Array(this.page)
      .fill(0)
      .map((_, index) => index);
    this.pages.pop();
  }

  get currentPage(): number {
    return this.active;
  }
}

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