Angular 2将变量传递给html中的构造函数

Question

我正在创建一个要在整个应用程序中重用的组件，下面的重要代码

.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 标记中输入构造函数变量？对于我的一生，我找不到有关如何做的适当引用。

Answer 1

如果您需要在组件类中提供一些值，那么只需使用 @Input 变量并将值作为组件的属性传递

export class DieInputComponent{    
    @Input()sides:Number;
    @Input()dice:Number;
 }   
    <die-input [sides]='6' [dice]='1'></die-input>