Question

我在index.html中有一些异步javascript库的脚本标签，我想将它们应用到属性指令中，以通过以下方式控制它们的“激活”：将类型属性从“ 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>
....

我如何实现我的目标？有更好的方法来解决我的问题吗？

Answer 1

您可以在加载软件包之前尝试等待同意。

因此，假设您有一个同意书处理程序

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

现在我不知道这是否行得通，但我会尝试一下。做一个dynamic import。

所以看起来可能像这样：

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

那行得通吗？

Answer 2

像Angular这样的外观不会让您处理任何脚本。请查看here，了解其他人如何动态加载脚本。

Angular，如何将属性指令应用于index.html中的元素

2 个答案: