角度2+属性は

Question

目的はただ

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

まず問題垂直画素数を追加することで）まだ（@Inputに指定されている既知のプロパティではありません。エラーは、高さが知られているプロパティではありませんと言いますスペーサーのしたがって、これをチェックしてください： 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を追加したいと思いますが、それは事態を悪化させるようです。 私はあなたの助けに感謝します。

ありがとう、ヨギ。

Answer 1

問題は高さが有効な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ファイルの高さを@Inputなしでheight = '200px'と定義し、上記のコードを使用してhtmlにその変数を取得できます。もう一度@Input（）デコレータは、height値が別のコンポーネントから来ている場合にのみ必要です。この場合、htmlテンプレートではなく別のコンポーネントと通信するために使用されます。