[英]angular 2+ attribute isn't a known property of yet is specified in @Input()
Purpose is to just add number of pixels vertical 目的是仅添加垂直像素数
<spacer [height]="200"></spacer>
First problem: error says height isn't a known property of spacer. 第一个问题:错误表明高度不是spacer的已知属性。 So check this out: HTML:
因此,请查看以下内容:HTML:
<div [ngStyle]="{'padding': 'getHeight()'}">
</div>
import {Component, Input} from '@angular/core';
@Component({
selector: 'spacer',
templateUrl: './spacer.component.html',
styleUrls: ['./spacer.component.scss']
})
export class SpacerComponent {
@Input() height = '';
constructor() { }
getHeight() {
return this.height;
}
}
SO height IS a property ? 所以身高是财产吗? right?
对? I would also like to add px to the height but that seems to make matters worse.
我还想将px添加到高度,但这似乎会使情况更糟。 I appreciate your help.
我感谢您的帮助。
Thanks, Yogi. 谢谢瑜珈
The problem is height is not a valid html attribute. 问题是height不是有效的html属性。 if you are trying to change the px height you need to use a class or an attribute binding to make the css dynamic.
如果要更改px高度,则需要使用类或属性绑定来使css动态化。 you also need to have 'px' after the '200' for example:
您还需要在“ 200”之后加上“ px”,例如:
@Input() height="200px"; //better to set the inside the parent component
// html
// use attribute binding
<div [attr.height]="height"></div>
// OR use interpolation
<div attr.height="{{ height }}"></div>
Furthermore: 此外:
I think you are confused about the @Input() usage. 我认为您对@Input()用法感到困惑。 @Input() is not necessary to perform this task, it is most used to get template references or values from the parent component.
@Input()不是执行此任务所必需的,它最常用于从父组件获取模板引用或值。
you could simply define height in your .ts file, height = '200px'
without @Input, and then use the code above to get that variable into your html. 您可以简单地在.ts文件中定义高度,不使用@Input定义height
height = '200px'
,然后使用上面的代码将该变量获取到html中。 Again the @Input() decorator is only needed if the height value is coming from another component, in which case it is used to communicate with another component, NOT your html template. 同样,仅当高度值来自另一个组件时才需要@Input()装饰器,在这种情况下,它用于与另一个组件(而不是HTML模板)进行通信。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.