Javascript Angular 2将html属性从父级传递到子级

Javascript Angular 2将html属性从父级传递到子级,javascript,angular,angular2-forms,angular2-directives,Javascript,Angular,Angular2 Forms,Angular2 Directives,我想将HTML的属性从父级传递给子级。是否有任何方法可以直接从父级传递属性,而无需在父级的.ts类中为其创建变量,然后传递它。下面是父级的示例代码 <app-field-lable type="number"></app-field-lable> 这是我的字段标签组件 <input [(ngModel)]="signageRequest.brandingSpaceName" class="form-control"/> 如您所见,我正在从父级传递

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

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

这是我的字段标签组件

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

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


谢谢

您可以将
字符串
作为
@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{}
}
@组件({
选择器:“应用程序字段标签”,
模板:“”,
样式URL:['./字段标签.component.css']
})
导出类FieldLableComponent实现OnInit{
@Input()inputType:字符串;
构造函数(){}
恩戈尼尼特{}
}

主要思想是,本机属性(如
type
)需要字符串,而
@Input()
属性(如
[customAttr]
)需要变量

您可以将
字符串
作为
@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{}
}
@组件({
选择器:“应用程序字段标签”,
模板:“”,
样式URL:['./字段标签.component.css']
})
导出类FieldLableComponent实现OnInit{
@Input()inputType:字符串;
构造函数(){}
恩戈尼尼特{}
}

主要思想是,本机属性(如
type
)需要字符串,而
@Input()
属性(如
[customAttr]
)需要变量,但它不是这样工作的。我试图直接传递“number”,但呈现的输入字段不是type=“number”@HaseebWali,我看不到您的
输入的
type
属性,您是否注意到
传递参数时,
内的
单引号?请更新您的代码以实现
”数字的传递“
-您指的是
number
变量,您应该传递字符串值
“'number'”
很抱歉键入o。我用单引号发送了“'number'”,它被正确地作为@Input()inputType接收,但问题是当我在这个输入元素上使用它时,它不是数字类型的。@HaseebWali try
它不是这样工作的。我试图直接传递“number”,但呈现的输入字段不是type=“number”@HaseebWali,我看不到您的
输入的
type
属性,您是否注意到
传递参数时,
内的
单引号?请更新您的代码以实现
”数字的传递“
-您指的是
number
变量,您应该传递字符串值
“'number'”
很抱歉键入o。我用单引号发送了“'number'”,它被正确地作为@Input()inputType接收,但问题是当我在这个输入元素上使用它时,它不是数字类型。@HaseebWali try