传递给子组件的原始值在 Angular 2 的构造函数中未定义

Posted 2023-02-23

【中文标题】传递给子组件的原始值在 Angular 2 的构造函数中未定义

【英文标题】：Primitive values passed to child component are undefined in constructor in Angular 2

【发布时间】：2016-10-21 21:38:11

【问题描述】：

我对 Angular 2 很陌生。 我需要创建一个可重用的用户资料图片组件，它有 2 个高度和宽度输入，最后以正确的大小表示图片。

我在 parent.html 中的组件调用：

<user-profile-pic [height]="50" [width]="50" [counterValue]="myValue"></user-profile-pic>

我的组件用户配置文件图片：

import Component,Input from '@angular/core';

@Component(
  selector : 'user-profile-pic',  
  template: '<img src="http://to/picture.png"> ',
  inputs:['width','height']
)

export class UserProfilePic 
    /*
    @Input() height : String;
    @Input() width : String;
*/
public height:String;
public width:String;
  constructor() 
      console.log("This is the height ",this.height," And the width : ",this.width);
  

控制台记录了我未定义的高度和宽度.. 有什么建议 ？

【参考方案1】：

试试看：

import Component,Input, OnInit from '@angular/core';

@Component(
  selector : 'user-profile-pic',  
  template: '<img src="http://to/picture.png"> '
)

export class UserProfilePic implements OnInit 
    @Input() height : String;
    @Input() width : String;

  ngOnInit() 
      console.log("This is the height ",this.height," And the width : ",this.width);
  

【参考方案2】：

输入尚未在构造函数中设置。它们在第一次调用 ngOnChanges() 时设置（每次更新调用）。 ngOnInit() 在第一次调用 ngOnChanges() 之后调用。

只需将代码更改为

export class UserProfilePic 
    /*
    @Input() height : String;
    @Input() width : String;
*/
public height:String;
public width:String;
ngOnInit() 
      console.log("This is the height ",this.height," And the width : ",this.width);
  

从您的示例看来，您的组件也缺少 counterValue 输入。

【讨论】：

非常感谢。 [关于 counterValue - 没关系，我知道 ]