gpt4 book ai didi

javascript - 如何在 Angular 9 中访问组件的唯一封装 ID

转载 作者:行者123 更新时间:2023-12-01 15:15:32 28 4
gpt4 key购买 nike

我试图通过添加这样的实例 id 来封装我的元素 id:

<label for="id-{{ unique }}-name"></label>
<input id="id-{{ unique }}-name" type="text" formControlName="name">

我以前使用过这个: https://stackoverflow.com/a/40140762/12858538 .
但是在将 Angular 从 7 升级到 9 之后,这似乎已被弃用。我正在考虑一个简单的帮助服务,它会为我的应用程序生成唯一的 id。

像这样的东西:
@Injectable()
export class UniqueIdService {
private counter = 0

constructor() {}

public getUniqueId (prefix: string) {
const id = ++this.counter
return prefix + id
}
}

灵感来自 lodash uniqueid

但我宁愿在 ids 中使用 angulars 构建。
所以我目前的解决方案是从组件中提取 id _nghost属性。
constructor ( private element: ElementRef, ) {
const ngHost =
Object.values(this.element.nativeElement.attributes as NamedNodeMap)
.find(attr => attr.name.startsWith('_nghost'))
.name
this.unique = ngHost.substr(ngHost.lastIndexOf('-') + 1)
}

但我对这个解决方案并不完全满意,我正在寻找对 id 的直接访问。

有谁知道如何访问这个?

最佳答案

Angular 9 中的唯一 ID 可以表示为:

_nghost   -   par    -     2
| | |
static APP_ID componentDef.id

为了访问 componentDef.id您可以执行以下操作:
export class SomeComponent implements OnInit {
unique = this.constructor['ɵcmp'].id;

在哪里 ɵcmp是私有(private)变量 NG_COMP_DEF

Ng-run Example

关于javascript - 如何在 Angular 9 中访问组件的唯一封装 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60114682/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com