Angular 2/4：如何使用我的自定义组件进行只读

Question

我有一个自定义组件，它有一个标签和一个输入框。我想让readonly输入框。我如何实现以下目标？

<custom-component [readonly]=true>

我的自定义组件模板如下所示

<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

在组件中定义一个Input变量：

@Input() readOnly: Boolean;

从您的父母来电中使用就像您指出的那样：

<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：boolean;

在组件模板中使用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>

希望它会有所帮助