如何访问组件的自定义属性？ （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。