在Angular 2中声明模板中的变量

Question

我想让我的用户有机会选择使用哪种类型的输入来选择颜色：type='text'或type='color'。所以，我写这个模板：

<input [type]="colorInputTypeText ? 'text' : 'color'"> 
<input type="checkbox" [(ngModel)]="colorInputTypeText" name="colorInputTypeText"> 

而且在my-component.ts：

@Component({ 
    ... 
}) 
export class MyComponent { 
    colorInputTypeText = true; 
    ... 
} 

我的问题是：是还好吧声明colorInputTypeText为MyComponent类的字段，或者我应该以某种方式将它声明本地模板？如果正确的答案是“在模板中”，该怎么做？

谢谢。

Answer 1

注意：这个答案是受@Bernardo Pacheco启发的，所以请不要忘记提高他的答案。

这里是解决方案：

<input [type]="cb.checked ? 'color' : 'text'" id="color" name="color"> 
<input type="checkbox" name="inputTypeColor" checked #cb [(ngModel)]="cb.checked"> 

Answer 2

像你这样在类中声明一个字段没有问题。

但是，如果你不想碰你的类，你可以做到这一点只在模板：

<input [type]="colorInputTypeText ? 'text' : 'color'"> 

<input type="checkbox" name="colorInputTypeText" #cb (change)="colorInputTypeText = cb.checked"> 

角引擎盖下为您创建一个colorInputTypeText。

colorInputTypeText是一个布尔变量。默认情况下它是false，所以复选框未被选中。如果你想默认值等于true，你必须添加checked属性是这样的：

<input type="checkbox" name="colorInputTypeText" checked #cb (change)="colorInputTypeText = cb.checked"> 

个人而言，我更喜欢这种解决方案，因为你的类不需要模板是宣布额外的属性和逻辑容易明白。