Как удалить теги сценария в index.html из компонента Angular
<script data-jsd-embedded data-base-url = "" data-key = "" type = "text/javascript" src = "js-text-sample.js"></script>
Выше приведен пример тега сценария, который находится на index.html.
Я хочу скрыть его внутри компонента Angular.
Компонент angular сначала получит конфигурацию из API. Затем он проверит, нужно ли скрывать скрипт или нет.
Сценарий представляет собой встроенный виджет, который мне нужно скрыть, если он не соответствует действительности в API конфигурации.
Как скрыть это от кода компонента?
@luke jon мы не можем использовать ng-if внутри index.html в проекте Angular.
Вы можете создать тег script внутри angular, если он должен быть включен. См. пример здесь: stackoverflow.com/a/46924372/11028838
Тег скрипта не виден, так что вы подразумеваете под «скрытием» тега скрипта?
Я имею в виду удалить тег сценария.
Ответы 2
Вы можете сделать это классическим способом с помощью javascript. Когда вы получите ответ от API, запросите DOM, чтобы получить ссылку на элемент и удалить его:
const element = document.getElementById('widgetContainerId');
element.parentElement.removeChild(element);
Это удалит виджет из DOM.
Если в дальнейшем в течение жизненного цикла приложения вы захотите показать его снова, то вам следует не удалять весь элемент из DOM, а скрыть его, может быть, с помощью display: none;:
const element = document.getElementById('widgetContainerId');
element.style.display = 'none';
Всякий раз, когда вам нужно, чтобы он снова отображался, обновите свойство отображения на что-то другое, например block:
element.style.display = 'block';
это не работает. Виджет по-прежнему отображается.
Вы должны скрыть (или удалить) сам виджет, а не элемент script.
Вместо того, чтобы размещать тег скрипта и беспокоиться о логике после скрытия/отображения, почему бы вам не создать тег скрипта во время выполнения на основе результата.
import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
class MyComponent implements OnInit {
constructor(
private _renderer2: Renderer2,
@Inject(DOCUMENT) private _document: Document
) { }
public ngOnInit() {
let script = this._renderer2.createElement('script');
script.src='_SOURCE_HERE_'
`;
this._renderer2.appendChild(this._document.body, script);
}
}
вы также можете создать метод, который может обрабатывать добавление/удаление для вас тега скрипта по идентификатору, извините, я не показал код выше
как добавить эти элементы в <script> при добавлении? (data-jsd-встроенная база данных-url = "" data-key = "")
script.setAttribute('data-jsd-embedded', ''); script.setAttribute('URL-адрес базы данных', ''); script.setAttribute('ключ данных', '');
Я пробовал, но это не работает
у меня это сработало, дайте мне минутку, я дам вам ссылку на stackblitz
проверьте здесь angular-vmjbxk.stackblitz.io. Осмотрите элемент, который вы напишете в голове
URL редактора stackblitz.com/edit/angular-vmjbxk?file=src/app/…
@AnthonyCuartero, дайте мне знать, если вы его получили, и, пожалуйста, примите ответ, это поможет людям с похожими вопросами
Да, это работает. Спасибо. Я вижу это в html. Но виджет не загрузился. Я не знаю, почему. Я просто покопаюсь в этом.
Хорошо @AnthonyCuartero, дайте мне знать, если нужно
попробуйте: <script *ngIf = "shouldHide" data-jsd-embedded data-base-url = "" data-key = "" type = "text/javascript" src = "js-text-sample.js"></ сценарий>