Question

在父组件中，我有：

<app-access-password [profileId]="getProfileId(kid.getId())"></app-access-password>

如果getProfileId(kid.getId()返回数字，如果是孩子。我可以在模板中看到此值：

{{getProfileId(kid.getId())}}它不是空的。

当我尝试获取组件profileId中的app-access-password值时：

@Input() profileId: number;
constructor() {
   console.log(this.profileId)
}

我收到未定义的消息。为什么？

Answer 1

视图加载后需要访问，将其移至ngOnInit（）方法

@Input() profileId: number;
ngOnInit() {
   console.log(this.profileId)
}

Answer 2

即使答案被接受，我也希望有所不同。您可以在ngOnChanges()中访问它。 ngOnChanges甚至在ngOnInint()之前被调用。

ngOnChanges(changes : SimpleChanges){
 //changes.profileId will store both the previous and the current value . 
}

因此，一旦@Input()生效（值从null更改为定义的值），就会自动调用ngOnChanges，因此您不必等待组件{ {1}}

Answer 3

您必须在ngOnInit()之后加载

@Input() profileId: number;
ngOnInit() {
   console.log(this.profileId)
}
ngOnChanges(){
// you can access value everytime `this.profileId` value changes
}

Answer 4

角度救生钩设计说，constructor之后可以访问所有输入值。您可以从init访问它。

@Input() profileId: number;
ngOnInit() {
    console.log(this.profileId);
}

Answer 5

@Input() profileId: number;
ngOnInit() {

}
console.log(this.profileId)

您可以在任何地方访问班级内部

如何在子组件Angular中获取输入参数？

5 个答案: