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

Question

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

的示例代码

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

这是我的字段标签组件。

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

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

谢谢

Answer 1

你可以把 string 写成 @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{}
}

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

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

Angular 2 passing html attributes from parent to child

javascript

angular2-forms

angular2-directives

angular