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

【问题标题】：Angular 2/4: How do I make readonly work with my custom componentAngular 2/4：如何使只读组件与我的自定义组件一起工作
【发布时间】：2018-06-09 21:37:55
【问题描述】：

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

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

【问题讨论】：

结帐stackoverflow.com/questions/2874688/…

标签： angular angular2-forms angular2-directives

【解决方案1】：

在你的组件中定义一个输入变量：

@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)"/>

【讨论】：

【解决方案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>

希望对你有帮助

【讨论】：