Как показать / скрыть "Поделиться этими кнопками html" на желаемых маршрутах, добавленных в index.html

#javascript #html #angular #typescript

#javascript #HTML #angular #typescript

Вопрос:

Я вношу изменения в существующее приложение Angular. У меня есть требование скрыть «Поделиться этими кнопками» на определенных маршрутах. Этот модуль «Поделиться» отображается в левой части окон браузера и добавляется в приложение в index.html файле с тегом ссылки в заголовке, как показано ниже:

   <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=5c6992d57056550011c4a534amp;product=inline-share-buttons"
async="async"></script>

Проблема в том, что этот модуль добавлен вне приложения angular, и этот html не добавляется из приложения angular.
Есть ли какой-либо способ, которым я могу удалить или скрыть div «Поделиться этим» на определенных маршрутах с помощью JavaScript или Typescript?

1. Загружается ли это содержимое (панель кнопок) в отдельный iframe?

2. Это добавляется как div, но над этим div я вижу iframe над ним при проверке элементов с помощью инструментов div.

3. Вам нужно создать пользовательскую директиву для загрузки скрипта (НЕ используя тег script в индексе) и переноса загруженного содержимого. При подписке на события маршрутизатора в директиве вы можете управлять видимостью div.

4. @ashish.gd Есть ли какой-нибудь пример, который я могу использовать?

Ответ №1:

Поскольку элемент загружается синхронно и вне рамок angular, вам нужно получить доступ к объектам javascript window или document и динамически добавлять пользовательский css в iframe, который вы хотите скрыть.

Для доступа к документу вы можете сделать что-то вроде этого:

 import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

export class SomeClass {

  window: any;

  constructor(@Inject(DOCUMENT) private document: Document) {
     this.window = this.document.defaultView;
  }

  check() {
    console.log(this.document);
    console.log(this.window);
  }

}

после доступа к окну и документу вы можете динамически добавлять css, чтобы скрыть элемент:

 document.getElementById("your_iframe_id").style.display = "none";

Если у iframe нет идентификатора, вы можете использовать другие методы, document подобные getElementsByTagName("iframe") , чтобы получить все iframes на вашей странице, или что-то подобное