Angular父子组件传值：deals-transaction向app-deals-approval传参方案咨询

方案选择结论 #

@ViewChild不是合适的解决方案，优先使用@Input参数传递，具体理由和实现步骤如下：

核心原因说明 #

你当前的场景是父组件向直接子组件传递数据，属于Angular最典型的父→子通信场景，@Input是官方推荐的标准实现，符合单向数据流规范，可读性、可维护性远高于@ViewChild方案。
而@ViewChild不适用的核心原因有两个：

• 时序不匹配：父组件最早能操作@ViewChild获取的子组件实例的时机是ngAfterViewInit，此时子组件的ngOnInit已经执行完毕，完全赶不上你要求的「在子组件ngOnInit里访问值」的需求
• 场景不匹配：@ViewChild的适用场景是操作子组件DOM、调用子组件方法，不是用来做常规数据传递的，后续迭代维护成本很高

具体实现步骤 #

1. 适配父组件模板绑定

修改deals-transaction.component的模板，给子组件绑定你要传递的testPageOutput，直接复用子组件已经定义好的dataTest输入属性即可：

<div>
  <!-- 加ngIf可以保证子组件等数据返回后再初始化，子组件ngOnInit就能直接拿到值 -->
  <app-deals-approval 
    *ngIf="testPageOutput"
    [dataTest]="testPageOutput" 
    [transaction]="transaction"
  ></app-deals-approval>
</div>

2. 适配异步时序（可选）

如果你的业务逻辑允许子组件先渲染、数据回来后再更新，不需要严格在ngOnInit里取值，就可以去掉上面模板里的*ngIf，在子组件里用ngOnChanges监听数据变化即可：

// deals-approval.component.ts 新增代码
export class DealsApprovalComponent implements OnInit, OnChanges {
  // 原有代码保持不变
  ngOnChanges(changes: SimpleChanges): void {
    // 监听到dataTest有值且发生变化时执行逻辑
    if (changes['dataTest']?.currentValue) {
      console.log('拿到父组件传递的数据：', this.dataTest)
      // 你原本要写在ngOnInit里的相关逻辑可以放在这里执行
    }
  }

  ngOnInit(): void {
    // 这里放不需要依赖dataTest的初始化逻辑即可
  }
}

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