Question

我正在项目中创建可重用的自定义输入组件，并将ng-content用于输入标题的动态内容投影，但是，我想知道是否有一种方法可以对输入占位符进行内容投影？请注意，占位符的类型为 Number

我曾经看到有人为输入文字输入完成了操作，但我自己尝试不起作用

<div class="input-container">
  <span class="input-heading-text">
    <ng-content></ng-content>
  </span>
  <input type="number"  [placeholder]="text.innerHTML"/>
</div>

Answer 1

在组件ts文件中声明一个名为占位符的变量（或您喜欢的任何变量），然后

<input type="number"  [placeholder]="placeholder" />

Answer 2

您只需要声明一个属性并使用输入装饰器，即可从父组件传递数据

  @Input() placeholder:string = "";
  @Input() label:string;

模板

<div class="input-container">
  <span class="input-heading-text" *ngIf="label">
  {{label}}
  </span>
  <input type="number"  [placeholder]="placeholder"/>
</div>

您仍可以将ng-content用于标签部分，在该部分中，您不仅要传递文本，还希望传递html标记，但占位符的最佳情况是将值传递给与下面的示例相同的属性

父组件

<input-elm label="user name" placeholder="your name...."></input-elm>

demo ??

ng-content用于输入类型的文本占位符

2 个答案: