Angular, как применить директиву атрибута к элементу в index.html - PullRequest
Новая
       17

Angular, как применить директиву атрибута к элементу в index.html

0 голосов
/ 15 мая 2019

У меня есть несколько тегов сценариев асинхронных библиотек JavaScript в index.html, и я хочу применить к ним директиву атрибута для управления их «активацией», изменив атрибут type с «text / plain» на «text / javascript», когда Пользователь дает согласие на использование файлов cookie. Кажется, что директива никогда не достигается angular, возможно, потому что она находится за пределами угловой зоны, фактически журналы в конструкторе и в функции обратного вызова функции подписки никогда не печатаются в консоли, и директива становится бесполезной. 

@Directive({
  selector: '[appLoadOnConsent]'
})
export class LoadOnConsentDirective implements OnInit, OnDestroy {
  private statusChangeSubscription: Subscription;
  constructor(
    private ccService: NgcCookieConsentService,
    el: ElementRef
  ) {
    // never printed
    console.log(el);
  }

  ngOnInit() {

    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {
        // never printed
        console.log('cookie status change', event);
      });
  }

  ngOnDestroy() {
    this.statusChangeSubscription.unsubscribe();
  }
}

в index.html 

<head>
  ....
  // library 1
  <script type="text/plain" appLoadOnConsent async defer src="https://external.library1.js"></script>
  // library 2
  <script type="text/plain" appLoadOnConsent async defer src="https://external.library2.js"></script>
</head>
....

Как мне достичь своей цели? Есть ли лучшие способы решить мою проблему?

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Похоже, Angular не позволит вам обрабатывать любые сценарии. Пожалуйста, посмотрите здесь , как другие динамически загружают скрипты.

0 голосов
/ 15 мая 2019

Вы можете попробовать дождаться согласия перед загрузкой пакета.

Допустим, у вас есть обработчик согласия 

handleConsent(consentGiven: boolean): void {
    if (consentGiven) {
        console.log('consent was given');
    }
}

Теперь я не знаю, сработает ли это, но я бы попробовал это. Сделайте динамический импорт .

Так что это может выглядеть примерно так: 

handleConsent(consentGiven: boolean): void {
    if (consentGiven) {
        import('https://external.library1.js')
        .then((module) => {
            module.default();
            module.doStuff();
        });
    }
}

Будет ли это работать?

...