각 2/4 : 맞춤 구성 요소로 읽기 전용 작업을 수행하는 방법

Question

레이블과 입력 상자가있는 사용자 지정 구성 요소가 있습니다. 나는 입력 상자를 읽기 전용으로 만들고 싶다. 아래에서 어떻게 달성 할 수 있습니까?

@Input() readOnly: Boolean; 

사용하여 부모 전화에서 당신이 거꾸로 표시처럼 :

<div> 
    <div><label>Hello</label></div> 
    <div><input class="input input-lg" id="float-input" type="text" size="30" pInputText [(ngModel)]="value" 
      (change)="onChange(value)" (keydown)="onChange(value)" (keyup)="onChange(value)" 
      (keypress)="onChange(value)"> 
    </div> 
</div> 

Answer 1

이 구성 요소의 입력 변수를 정의 아래

<custom-component [readonly]=true> 

내 사용자 지정 구성 요소 템플릿입니다

<custom-component [readOnly]="true"></custom-component> 

,

및 양식의 읽기 전용 값을 정의하려면이 입력 변수를 사용

<input class="input input-lg" 
    id="float-input" type="text" size="30" 
    pInputText [readonly]="readOnly" 
    (change)="onChange(value)" (keydown)="onChange(value)" 
    (keyup)="onChange(value)" (keypress)="onChange(value)"/> 

Answer 2

직접 읽기 전용으로 구성 요소를 만들 수 없습니다. 그냥 입력을 구성 요소에 입력을하고 구성 요소에서 입력

<custom-component [readonlyComp]="true"> 

에 읽기 전용 수 있도록 구성 요소에서 사용

@Input() readonlyComp : 부울;

구성 요소 템플릿에 readonlyComp를 사용하십시오.

<div> 
    <div><label>Hello</label></div> 
    <div><input class="input input-lg" id="float-input" type="text" size="30" pInputText [(ngModel)]="value" [readonly]="readonlyComp" 
      (change)="onChange(value)" (keydown)="onChange(value)" (keyup)="onChange(value)" 
      (keypress)="onChange(value)"> 
    </div> 
</div> 

그것이 도움이 될 것입니다 희망