如何访问组件的自定义属性？ （Angular 5）

Question

我有一个名为phrase的组件，使用方式如下：

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

现在假设我使用jQuery获取其中一个短语组件。我如何访问attachedPhrase？

Answer 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元素的实际引用（nativeElement或ViewChild ElementRef属性。元素参考）。

Answer 2

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

有关Angular 5指令的详细信息，请查看this site。