如何在子组件控制器类中捕获@input参数

Posted 2023-02-22

【中文标题】如何在子组件控制器类中捕获@input参数

【英文标题】：how to capture the @input parameter in the child component controller class

【发布时间】：2017-04-26 19:52:42

【问题描述】：

如何在子组件控制器类中捕获@Input() 参数。我试图从 Constructor 和 OnInit 生命周期事件中控制台记录它，但它是未定义的。但是 id 通过一种方式绑定正确显示在子组件 html 上

我需要参数信息来在我的子组件中编写一些自定义逻辑。

parent.component.ts

@Component(
  selector: 'app-parent',
  templateUrl: './parent.component.html'
)
export class ParentComponent implements OnInit 
    parameter : any = [1 ,2, 3] ; 

child.component.ts

@Component(
  selector: 'app-child',
  templateUrl: './child.component.html'
)
export class ChildComponent implements OnInit 
    @Input() parameter : any ; 
    Constructor() 
        console.log(this.parameter) // prints undefined
    
    ngOnInit() 
        console.log(this.parameter) // prints undefined
    

parent.component.html

<app-child [parameter]='parameter' ></app-child>

child.component.html

 parameter  // prints [1 ,2, 3]

【问题讨论】：

添加一些示例代码

【参考方案1】：

如果您在代码的这个 plunker 中看到，您会看到只有 constructor 输出未定义，ngOnInit 输出数组 [1, 2, 3]

这是一个工作的 plunker https://embed.plnkr.co/szRxO7b94r1o15vLbLbl/

更新评论 plunker 现在使用服务和测试 API，它在父子节点上运行良好。使用 ngOnChanges，因此您可以在响应返回后对其进行处理。您应该阅读@Günter Zöchbauer 在他的回答中提到的lifecycle hooks。

【讨论】：

感谢 plunkr 工作示例。我尝试设置相同的变量，它在我的项目中也能完美运行，我很惊讶，然后我意识到我在父组件的订阅事件中设置了变量，这些变量是未定义的（因为它仍然没有被分配为ngOnInit 在子组件上运行？）this.service.getMethod().subscribe(results => this.parameter = results );

@Sal 我已经使用连接到测试 API 的服务更新了 plunker。如果您也可以分享您的服务或尝试制作一个显示您的问题的插件。

@j plunkr 也有同样的问题....我也能够将它绑定到 UI，但无法在 ngOnInit 事件中捕获它以处理对象。下面是从 ngOnInit 方法清楚地打印 undefined 的控制台数据。 run.plnkr.co/preview/ciwmjiw2a00093j5nmmxxuks9/src/app.ts!transpiled:52 constructor undefined run.plnkr.co/preview/ciwmjiw2a00093j5nmmxxuks9/src/app.ts!transpiled:55 ngOnInit undefined

@Sal 那是因为对服务的请求没有返回请求。该请求的时间完全取决于从具有许多不同因素的 api 中检索该数据。当请求成功返回以使用数据时，您将需要订阅等待更改或触发事件。您到底想对孩子返回的数据做什么？

@sal 如果您查看更新后的 plunker，您会发现 ngOnChanges 可以满足您的要求。

【参考方案2】：

正如人们之前所说，您应该在 ngOnInit() 中获取参数值

还有两个细节：你不需要使用'implements OnInit'，并在开头使用小'c'字母写'constructor()'。

【参考方案3】：

@Input()s 在构造函数执行时尚未设置。

当更改检测运行并更新时，@Input()s ngOnChanges() 被调用。

第一次调用ngOnChanges() 后，调用ngOnInit()。

有关生命周期方法的更多详细信息，请参阅https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html