Angular 2 在html中将变量传递给构造函数
Angular 2 Pass variables to constructor in html
我正在创建一个要在我的应用中重复使用的组件,下面是重要的代码
.ts
export class DieInputComponent {
constructor(private sides: Number, private dice: Number) {
}
}
.html
<input type="number" placeholder="{{dice}}d{{sides}}"/>
我正在 html 模板中创建这些对象,就像这样
<die-input></die-input>
我将如何在 html 标记中输入构造函数变量?对于我的生活,我找不到关于如何做的合适参考。
您可以在构造函数中使用@Attribute
关键字来获取属性值。这将为您提供正在搜索的属性的字符串值。对于您的示例,它将是:
export class DieInputComponent {
constructor(@Attribute('placeholder') theInput: string) {
// theInput.length > 0?
// theInput.split into dice/sides and parse into integers
}
}
您可以在此处阅读有关 @Attribute
的更多信息:angular.io docs
如果您需要在组件中提供一些值 class 那么只需使用 @Input 变量并将该值作为组件的属性传递
export class DieInputComponent{
@Input()sides:Number;
@Input()dice:Number;
}
<die-input [sides]='6' [dice]='1'></die-input>
我正在创建一个要在我的应用中重复使用的组件,下面是重要的代码
.ts
export class DieInputComponent {
constructor(private sides: Number, private dice: Number) {
}
}
.html
<input type="number" placeholder="{{dice}}d{{sides}}"/>
我正在 html 模板中创建这些对象,就像这样
<die-input></die-input>
我将如何在 html 标记中输入构造函数变量?对于我的生活,我找不到关于如何做的合适参考。
您可以在构造函数中使用@Attribute
关键字来获取属性值。这将为您提供正在搜索的属性的字符串值。对于您的示例,它将是:
export class DieInputComponent {
constructor(@Attribute('placeholder') theInput: string) {
// theInput.length > 0?
// theInput.split into dice/sides and parse into integers
}
}
您可以在此处阅读有关 @Attribute
的更多信息:angular.io docs
如果您需要在组件中提供一些值 class 那么只需使用 @Input 变量并将该值作为组件的属性传递
export class DieInputComponent{
@Input()sides:Number;
@Input()dice:Number;
}
<die-input [sides]='6' [dice]='1'></die-input>