javascript - Angular 2将html属性从父级传递给子级

Question

我想将 HTML 属性从父级传递给子级。有什么方法可以直接从父级传递属性，而无需在父级的 .ts 类中为其创建变量然后传递它。这是父级的示例代码

<app-field-lable type="number"></app-field-lable>

这是我的字段标签组件。

<input [(ngModel)]="signageRequest.brandingSpaceName"  class="form-control"/>

正如您所看到的，我正在从父级传递 type="number"属性，但它不起作用。我知道在父级中创建变量然后通过 @Input 装饰器将其传递给子级的机制。但是有没有一种方法可以让我不必在父类中创建所有变量并将其直接传递给子类。

谢谢

Answer 1

您可以将字符串作为@Input:

<app-field-lable [inputType]="'number'"></app-field-lable>

这是 Ts 文件的示例以及如何在 html 中使用它

@Component({
 selector: 'app-field-lable',
 template: '<input type="{{inputType}}"/>',
 styleUrls: ['./field-lable.component.css']
})
export class FieldLableComponent implements OnInit {
 @Input() inputType:string;
 constructor() { }
 ngOnInit{}
}

主要思想， native 属性(如 type)需要字符串，但 @Input() 属性(如 [customAttr])需要字符串变量