Question

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

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

这是我的字段标签组件。

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

正如您所看到的，我正在从父级传递type =“number”属性，但它无法正常工作。我知道在父级中创建变量然后通过@Input装饰器将其传递给子级的机制。但有没有办法我不必在父类中创建所有变量并将其直接传递给子类。

由于

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属性从父级传递给子级

1 个答案: