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

【问题标题】：Angular 2 Pass variables to constructor in htmlAngular 2将变量传递给html中的构造函数
【发布时间】：2016-06-20 04:29:35
【问题描述】：

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

.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 标记中输入构造函数变量？在我的一生中，我找不到合适的参考资料。

【问题讨论】：

我还没有看到任何人将普通变量传递给组件构造函数。通常，您将服务传递给它，例如首选项服务。拿到服务的句柄后，就可以初始化这个对象了。
对于要传递给组件或服务的构造函数的参数（由DI实例化，您需要提供具有匹配类型或字符串键的值，DI为您传递它们。您不能传递此类类的构造函数参数直接自己。

标签： angular angular2-components

【解决方案1】：

您可以通过在构造函数中使用@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

【讨论】：

【解决方案2】：

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

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

【讨论】：