javascript - 如何访问组件的自定义属性？ ( 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 访问它，建议仅将其用于调试目的(这就是为什么这些属性仅在 Debug模式下可用的原因)。

考虑到 phrase 是一个字符串并且 attachedPhrase 应该可以作为组件输入和 DOM 属性使用，它应该被更改为 attribute binding :

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

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

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

属性和属性绑定(bind)可以互换，但前提是表达式需要插入到字符串中。

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