角2+属性未的又一个已知的场所在@input（）

问题描述：

<spacer [height]="200"></spacer>

第一个问题：错误说高度不是已知的属性的垫片。因此，检查了这一点： HTML：

<div [ngStyle]="{'padding': 'getHeight()'}"> 
    &nbsp; 
</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高度的属性？对？我也想把px加到高度上，但这似乎让事情变得更糟。我感谢您的帮助。

谢谢，瑜珈。

您是否将此组件添加到声明数组中？它应该工作https://plnkr.co/edit/fqcgQZyWIaYxmXIyiNjT?p=preview – yurzui

尝试给予不同的名称 - 选择器间隔。你在这里写的代码应该可以工作。问题可能来自代码的其他部分。 – Emre

答

问题是高度不是一个有效的html属性。如果您想要更改px高度，则需要使用类或属性绑定来使css动态。你还需要在 '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>

此外：

我想你感到困惑的@input（）的用法。 @Input（）不是执行此任务所必需的，它最常用于从父组件获取模板引用或值。

您可以简单地在.ts文件中定义高度，height = '200px'而不使用@Input，然后使用上面的代码将该变量获取到您的html中。同样，只有当高度值来自另一个组件时才需要@Input（）装饰器，在这种情况下，它用于与另一个组件通信，而不是您的html模板。

角2+属性未的又一个已知的场所在@input（）

相关推荐