在DOM中定义组件值

Question

每次使用选择器在dom中调用它时，我都想要更改一个组件。该组件将是一个通用的＆＃34;输入字段＆＃34;当我调用它时，我想要定义变量。

这是我希望在调用它时调用组件的东西，因为我可以调用此组件5次，每次都使用不同的值。

例如，我的第一个电话可能标有＆＃34;名字＆＃34;，必填，占位符为＆＃34;输入您的名字＆＃34;。

组件模板：

<div class="input-group" *ngIf=visible>
  <span class="input-group-addon" *ngIf="required" id="basic-addon1">{{label}}<span *ngIf=required class="required"> *</span></span>
  <input type="text" class="form-control" placeholder={{placeholder}} aria-describedby="basic-addon1">
</div>

Component.TS

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements OnInit {

visible:Boolean;
required:Boolean;
label:String;
disabled:Boolean;
placeholder:String;

  constructor() { }

  ngOnInit() {
  }
}

当我在dom中调用其选择器时，如何为组件定义值？

DOM

<h1>
  Sample Input Fields
</h1>
<app-input-field [label]="First Name" [placeholder]="Enter first name" [required]=true visible=true></app-input-field>

^我上面所做的并不起作用，因为它们不是组件的属性。

注意：

我不知道这些值是什么，也不想从父容器传递它们，我只想在DOM中定义这些变量。

Answer 1

您可以在要从父级接收的字段上使用 @Input 装饰器。

一个例子是：

Mono

您可以查看工作示例here。