如何访问组件的自定义属性？（角度 5）答案

【问题标题】：How can a custom attribute of a component be accessed? (Angular 5)如何访问组件的自定义属性？（角度 5）
【发布时间】：2018-05-31 00:36:03
【问题描述】：

我有一个叫做短语的组件，它的用法是这样的：

<phrase *ngFor="let phrase of phraseList.phrases" [attachedPhrase]="phrase"></phrase>

现在假设，我使用 jQuery 获得了这些短语组件之一。如何访问attachedPhrase？

【问题讨论】：

这里你使用的是 ngFor。我的问题是您是否只想获得特定的一个或全部？
属于这个元素的具体那个。
您可以使用 ViewChild、ElementRef 和 attr()。我可以帮你提供一个好的答案，但你能提供一个明确的用例吗？
不幸的是，我的应用程序在键盘事件上使用了一些脏 jquery 来返回我感兴趣的短语组件。imgur.com/GghcsKt，现在，我需要使用该 DOM 元素来附加短语对象给它。

【解决方案1】：

[attachedPhrase] 不是属性，而是property binding。它应该只在 Angular 应用程序中可用。

虽然可以以ng-reflect-* attribute 的身份访问它，但建议仅用于调试目的（这就是这些属性仅在调试模式 中可用的原因）。

考虑到phrase 是一个字符串，attachedPhrase 应该可以作为组件输入和 DOM 属性使用，所以应该将其更改为attribute binding：

<phrase *ngFor="let phrase of phraseList.phrases" attachedPhrase="{{ phrase }}"></phrase>

由于属性不区分大小写，所以会被编译成

<phrase attachedphrase="..."></phrase>

属性和属性绑定可以互换，但前提是表达式应该被插入到字符串中。

只要有可能，最好不要依赖 DOM 选择器并为 $(...) 提供对 DOM 元素的实际引用（ViewChild 或 ElementRef 元素引用的 nativeElement 属性）。

【讨论】：

【解决方案2】：

你可以试试：[attr.attachedPhrase]="'phase'"。

您可以查看 this site 关于 Angular 5 指令的详细信息。

【讨论】：