从 Angular 父组件传递到子组件的数据在子组件中未定义

Posted 2023-03-13

【中文标题】从 Angular 父组件传递到子组件的数据在子组件中未定义

【英文标题】：Data passed from an Angular parent component to a child component is undefined in child component

【发布时间】：2021-03-03 02:51:54

【问题描述】：

我有一个父组件将信息传递给子组件，但它是未定义的。如果这是 Angular 101，我深表歉意，但是如何延迟子组件渲染或运行任何 javascript，直到它获得所需的输入？

拉入数据的父组件ngOnInit：

public ngOnInit(): void 
     this.productService.getProductById(1).subscribe(product => 
            this.product = product;
        );

父组件 html：

<child-component [product]="product" id="myProduct"></child-component>

子组件输入声明：

@Input() public product: Product;

要求产品存在的子组件 ngOnInit：

public ngOnInit(): void 
     // It is returning as undefined
     console.log(this.product);

【问题讨论】：

对@Input 使用 setter 和 getter

【参考方案1】：

这是因为产品是异步加载的，所以当视图最初渲染时，产品是未定义的

 <child-component *ngIf="product" [product]="product" id="myProduct"></child-component>

你也可以使用 Onchanges

ngOnChanges(changes: SimpleChanges) 
    if (changes['product']) 
        let variableChange = changes['product'];
    

【讨论】：

这对我有用，但我想问一下。这是执行此类操作的正确方法吗？