Angular两个组件传值：使用@ViewChild访问子组件属性失败如何解决

• 生命周期使用错误：你配置的@ViewChild参数static: false代表子组件引用会在视图渲染完成后才初始化，而ngOnInit执行时视图还未完成挂载，此时selectProducts为undefined，无法读取对应属性。
• 属性名拼写错误：你在赋值ControlQuantity时错误拼写为ControlQuantitity，多了一个字母t，就算成功拿到子组件实例也会读取失败。

方案1：调整当前ViewChild写法 #

将赋值逻辑迁移到ngAfterViewInit钩子中，同时修正拼写错误，修改后buyerComponent.ts代码如下：

export class BuyerComponent implements OnInit, OnDestroy,AfterViewInit {
@ViewChild('selectProducts', { read: SelectComponent, static: false })
selectProducts: SelectComponent

CompleteQuantity:number
ControlQuantity:number

ngAfterViewInit() {
    this.CompleteQuantity = this.selectProducts.CompleteQuantity
    // 修正拼写错误
    this.ControlQuantity = this.selectProducts.ControlQuantity
}
}

如果需要在视图渲染前就用到这两个值，可以将@ViewChild的static参数改为true，就可以继续在ngOnInit中赋值（注意该配置仅在子组件不会被*ngIf等指令动态控制显示/隐藏时可用）。

方案2：使用公共服务共享状态（低耦合场景推荐） #

如果两个组件不是直接父子嵌套关系，或者后续需要多处共享这两个属性，可以创建一个公共服务存储状态，两边注入服务即可读写对应值，避免ViewChild带来的强耦合问题。

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