각 2 + 속성은 아직 알려진 속성은 @Input()

목적은 단지 수직 픽셀의 수를 추가하는 것입니다에 지정되지각 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; 
    } 
}

높이가 속성입니까? 권리? 나는 높이에 px를 추가하고 싶다. 그러나 그것은 사태를 더욱 악화시키는 것처럼 보인다. 귀하의 도움에 감사드립니다.

고마워요, 요기.

출처

2017-10-05 Yogi Bear

이 구성 요소를 선언 배열에 추가 했습니까? 그것은 작동해야합니다 https://plnkr.co/edit/fqcgQZyWIaYxmXIyiNjT?p=preview – yurzui

다른 이름을 부여보십시오 - 스페이서에 대한 선택기. 여기에 작성한 코드가 작동해야합니다. 코드의 다른 부분에서 문제가 제기되고 있습니다. – Emre

문제는 높이가 유효한 html 속성이 아닙니다. px 높이를 변경하려는 경우 클래스 또는 속성 바인딩을 사용하여 CSS 동적을 만들어야합니다. 당신은 또한 예를 들어 '200'후 '픽셀'을 가질 필요가 : 또한

@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() 데코레이터는 높이 값이 다른 구성 요소에서 오는 경우에만 필요합니다.이 경우 HTML 템플릿이 아닌 다른 구성 요소와 통신하는 데 사용됩니다.

출처

2017-10-05 22:14:34 FussinHussin

각 2 + 속성은 아직 알려진 속성은 @Input()

답변

관련 문제