Блог

Главная - Вопросы по программированию - Считывание значения элемента html-скрипта в Angular, который имеет тип json

Считывание значения элемента html-скрипта в Angular, который имеет тип json

#javascript #django #angular #getelementbyid

Вопрос:

На html-странице будет элемент сценария, представляющий собой статический контент ( сгенерированный из бэкенда Django) с идентификатором.

 <script id="hello-data" type="application/json">{"hello": "world\u003C/script\u003E\u0026amp;"}</script>

Я хотел получить эти данные в угловом сервисе ( или даже компоненте), который имел бы простой getElementById-это javascript.

 const value = JSON.parse(document.getElementById('hello-data').textContent);

Я провел много поисков, нашел ответы, указывающие на «ViewChild», «@Inject(ДОКУМЕНТ)», но ни один из них не работает с тегом «скрипт».

Любые указатели на решение были бы очень признательны 🙂

Правки: Ниже приведено то, что я пробовал с ДОКУМЕНТОМ

   constructor(@Inject(DOCUMENT) document: Document) {
    let el = document.getElementById('hello-data'); 
    console.log(el); // This prints null
    //this.data = JSON.parse(el.textContent);

  }

Интересно, что если я устану обращаться к любому другому элементу по идентификатору, это сработает. Я вижу проблему только с тегом сценария.

Комментарии:

1. Чтобы понять это правильно. У вас есть приложение angular, и вы получаете ответ от бэкенда Django. верно?

2. Вы можете получить доступ к элементам в DOM через document в Angular. Вы можете использовать DOCUMENT абстракцию, предоставляемую Angular, или, если вы не используете Angular Universal, вы можете просто использовать document ее, как в любом другом сценарии, даже если она находится в службе

3. Что именно не работает с тем, что у вас есть? Я получаю действительный объект?

4. Я устал от DOCUMENT абстракции , но она не работает. Я думаю, это потому, что я пытаюсь получить доступ к элементу сценария с идентификатором, где сценарий НЕ является javascript. Судя по описанию , он не будет отображаться, и, вероятно, именно по этой причине он не отвечает?

5. Тип тега сценария не имеет значения. Тег есть тег есть тег. Если у него есть идентификатор, вы можете выбрать его.

Метки: ,