Question

我有一个要在两个地方使用的名为“ myComponent”的组件（下拉按钮）。首先在导航中，然后在移动视图中在侧面导航中。但是，我需要更改组件内部的图像，具体取决于是从导航栏显示它还是从侧面导航显示它。

我在myComponent内使用@Input() imgName: string = "imageOne"。在组件的HTML模板中，我对变量<img ...src="../{imageOne}.png"

进行插值

当我从导航组件渲染<app-my-component [imgName]="imageTwo"></app-my-component>并登录时，imgName的值未定义。谁能告诉我为什么？

`export class MyComponent implements OnInit, AfterViewInit {
  @Input() public imgName: string = "img_one";  
  constructor() { }
  ngOnInit() {
    console.log("Inside ng on init");
  }
  ngAfterViewInit(){
    console.log("imgName value is: ${this.imgName}")
  }
}
`

我如何渲染我的组件

<app-my-component [imgName]="imageTwo"></app-my-component>

Answer 1

您正在绑定this.imageTwo的属性值，该属性值不存在。因此值为undefined。

如果要使用字符串常量，请不要使用方括号

<app-my-component imgName="imageTwo"></app-my-component>
                             ^^^ = will be a string literal

Answer 2

除了cgTag的答案：

我建议也在export default class CustomComponent extends Component { constructor(props){ super(props); } render(){ return( <View> <ImageBackground source = {{uri: this.props.imageSource}} style = {{width:100, height:100}}/> <View> ); } export default class App extends Component { render(){ return( <CustomComponent imageSource ='https://vignette.wikia.nocookie.net/moderncombatgames/images/0/0d/Chicken_Rice.png/revision/latest?cb=20151231093652'/> ); }生命周期挂钩中设置默认值。

ngOnChanges

为什么组件的属性与硬编码字符串的绑定始终保持未定义状态？

2 个答案: