Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Convert ngOnInit input reads to computed() for full signal reactivity

未关闭
  • 哪里不对？
#562 1 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 5 天内回复

@bracyw 已经在做这个了。

开始于 2026年3月29日。

评估

这个 Issue 还没有评估数据。

描述

angular-client straightforward
Description

Several components read @Input() values inside ngOnInit to derive local state. This breaks signal reactivity -- if the parent updates the input after init, the derived values go stale.

Migrate these components to use the input() signal function and computed() for derived state so values stay reactive. Remove ngOnInit from components where it only existed to compute derived input state.

Example

circular-percentage.component.ts reads this.dimension in ngOnInit to compute sizing values:

// Before
@Input() dimension!: number;
innerCircleDimension: number = 0;

ngOnInit() {
  this.innerCircleDimension = this.dimension * 0.87;
}

// After
dimension = input.required<number>();
innerCircleDimension = computed(() => this.dimension() * 0.87);
Affected Components
  1. SwitchComponent (src/components/switch/switch.component.ts) -- chargingString derived from isOn, onString, offString
  2. HStackComponent (src/components/hstack/hstack.component.ts) -- alignment derived from justifyContent, alignItems
  3. CircularPercentageComponent (src/components/circular-percentage/circular-percentage.component.ts) -- 4 sizing properties derived from dimension
  4. BatteryPercentageComponent (src/components/battery-percentage/battery-percentage.component.ts) -- 7 rendering properties derived from percentage, height, width
  5. HalfGaugeComponent (src/components/half-gauge/half-gauge.component.ts) -- widthpx, heightpx, label, percentage, fontsize derived from current, min, max, unit, size
  6. GraphComponent (src/components/graph/graph.component.ts) -- timeRangeMs derived from timeRangeSec
  7. DoubleLineGraphComponent (src/components/double-line-graph/double-line-graph.component.ts) -- timeRangeMs derived from timeRangeSec
  8. PieChartComponent (src/components/pie-chart/pie-chart.component.ts) -- already uses input() signals but reads them in ngOnInit instead of computed()/effect()
  9. SidebarCardComponent (src/pages/graph-page/graph-sidebar/sidebar-card/sidebar-card.component.ts) -- iconId derived from title
  10. GraphSidebarMobileComponent (src/pages/graph-page/graph-sidebar/graph-sidebar-mobile/graph-sidebar-mobile.component.ts) -- nodes, nodesWithVisibilityToggle derived from dataTypes
Acceptance Criteria
  • All 10 components migrated from @Input() + ngOnInit derived state to input() + computed()
  • ngOnInit removed from components where it only existed to compute derived input state
  • Templates updated to call signal getters (e.g. innerCircleDimension() instead of innerCircleDimension)
  • No regressions in component rendering
  • npx ng lint and npx prettier --check pass
主要语言
TypeScript
星标
5
派生
1
平均合并
5 天 13 小时
30 天内合并 PR
24

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

Northeastern-Electric-Racing/Argos 的其他 Issue

查看 Northeastern-Electric-Racing/Argos 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。