Как получить доступ к уникальному идентификатору инкапсуляции компонентов в Angular 9 - PullRequest
Новая
       13

Как получить доступ к уникальному идентификатору инкапсуляции компонентов в Angular 9

5 голосов
/ 07 февраля 2020

Я пытаюсь инкапсулировать свои идентификаторы элементов, добавляя идентификатор экземпляра следующим образом: 

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

Ранее я работал с этим: { ссылка }. Но после обновления Angular с 7 до 9 это кажется устаревшим. Я думал о простом вспомогательном сервисе, который генерировал бы уникальные идентификаторы для моего приложения.

Примерно так: 

@Injectable()
export class UniqueIdService {
  private counter = 0

  constructor() {}

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

, вдохновленный loda sh uniqueid

Но я скорее использовал угловые сборки в идентификаторах. Поэтому мое настоящее решение - извлечь идентификатор из атрибута _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)
}

Но я не совсем доволен этим решением и ищу прямой доступ к идентификатору.

Кто-нибудь знает, как получить к этому доступ?

1 Ответ

3 голосов
/ 08 февраля 2020

Уникальный идентификатор в Angular 9 может быть представлен как: 

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

Для доступа к componentDef.id вы можете сделать следующее: 

export class SomeComponent implements OnInit {
  unique = this.constructor['ɵcmp'].id;

где ɵcmp является частной переменной NG_COMP_DEF

Ng-run Пример

...