Angular 2/4：我如何使只读与我的自定义组件一起工作

Question

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

<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() readOnly: Boolean;

使用你的 parent 电话，就像你指出的那样：

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

并使用此输入变量在您的表单中定义 read-only 值：

<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>

希望对您有所帮助

Angular 2/4：我如何使只读与我的自定义组件一起工作

Angular 2/4: How do I make readonly work with my custom component

angular2-forms

angular2-directives

angular