尝试绑定到字符串常量时Angular2@Input未定义

也许这是正常的行为，做一个测试，

this.myColor

它是未定义的，但为什么呢？我的代码中有一个错误：

<h1 myDR [myColor]="red" > Test </h1>

测试

---

从'angular2/core'导入{Component，Directive，Input，ElementRef}；
@指示({
选择器：“[myDR]”，
主持人:{
“（mouseenter）”：“mouseenter（）”
}
})
导出类MyDi{
@输入（）myColor:string；
构造函数（专用el:ElementRef）{
}
mouseEnter（）{
this.el.nativeElement.style.backgroundColor=this.myColor；
console.log（this.myColor）；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`Hello World Angular2
试验
`,
指令：[MyDi]
})
导出类应用程序{
构造函数（）{
}
}

您可以将鼠标移到“Test”上并查看控制台

---

您必须用简单的引号将输入绑定括起来，如下所示

[myColor]="'red'"

这将把

red

字符串绑定到

myColor

。如果删除简单引号，它将查找名为

red

的类属性，该属性不存在，因此返回

undefined

您可以像我上面提到的那样做，也可以创建一个名为

red

的类属性。在这种情况下，它将绑定到class属性

@Component({
    template: `<h1 myDR [myColor]="red" > Test </h1>`
})

export class App {
    red: string = 'red';
}

• 使用

  @HostBinding

  （此案例将立即设置颜色）

@HostBinding（'style.background color'）获取颜色{
返回此.myColor；
}
mouseEnter（）{
this.myColor='blue'；
}

• 使用

  渲染器

  （使用此渲染器而不是

  nativeElement.style='value'

  ）

构造函数（公共呈现器：呈现器，公共元素：ElementRef）{}
mouseEnter（）{
this.renderer.setElementStyle（this.element.nativeElement，'background color'，this.myColor）；
}

绑定静态文本的更简单方法是

测试

请参阅“一次性字符串初始化”下的

---

哦，这是真的，我现在觉得自己很愚蠢。谢谢你的时间。@AngelAngel不客气。我用一些你可能感兴趣的东西更新了我的答案。它的更新非常有用，可以修改我问题的标题，以便更容易地使用更新的信息访问你的答案，我想我可以帮助其他人学习以下方法：@Input undefined Angular 2 using native Element，例如？Eric和@Angelangle，Eric的更新将很好地提出另一个问题，“使用nativeElement访问DOM有哪些好的替代方案？”这是真的，我没有想到，在这个替代方案中，感谢您的回复，这是值得留心的，这条评论是给其他读者的（因为我们在其他评论中对此进行了很好的讨论）：我真的不喜欢这个速记符号，因为它看起来只是一个HTML属性。我们必须检查组件定义，以确定

myColor

是否是一个输入属性。如果是，则此语法还使用值

red

填充输入属性。如果不是，则它只是一个HTML属性。我发现不明确。我更喜欢在我们想要影响指令或组件属性时看到

[]

s。它们会立即告诉我们我们正在进行属性绑定。@MarkRajcok感谢您的解释，我不理解使用[]和不使用[]的区别，您的解释澄清了这一点。使用[]更好并在双引号字符串中使用单引号设置值，如

[prop]=“'literalValue'”

，因为很明显，我们是属性绑定，而不仅仅是设置HTML属性。而且，通过这种方式，它不会将

prop

设置为HTML属性，而是只创建一个ng reflect属性。

@Component({
    template: `<h1 myDR [myColor]="red" > Test </h1>`
})

export class App {
    red: string = 'red';
}