Question

我目前正在将第三方库集成到Angular组件中。该组件依赖于我在构造函数中加载的脚本：

constructor(private cdRef: ChangeDetectorRef) {
    this.loadAPI = new Promise(resolve => {
        this.loadScript();
        resolve(true);
    });
}

public loadScript() {
    let isFound = false;
    const scripts = document.getElementsByTagName('script');
    for (let i = 0; i < scripts.length; ++i) {
        if (
            scripts[i].getAttribute('src') != null &&
            scripts[i].getAttribute('src').includes('loader')
        ) {
            isFound = true;
        }
    }

    if (!isFound) {
        const dynamicScripts = [
            'https://some.script.js',
        ];

        for (let i = 0; i < dynamicScripts.length; i++) {
            const node = document.createElement('script');
            node.src = dynamicScripts[i];
            node.type = 'text/javascript';
            node.async = false;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
        }
    }
}

当我加载组件并且第三方库在标记的根目录中定义时 - 它可以正常工作：

<div class="3rd-party" data-locale="something" data-template-id="id" data-businessunit-id="businessunit-id" data-style-height="240px" data-style-width="100%">
</div>

但是，如果我希望元素位于* ngIf div中，那么它只在事件中可见，它不会显示：

<div *ngIf="isSliderOpen">
  <div class="3rd-party" data-locale="something" data-template-id="id" data-businessunit-id="businessunit-id" data-style-height="240px" data-style-width="100%">
</div>

为什么会这样？我该如何避免这种行为？

Answer 1

我能够通过在标记中使用[hidden]标记而不是* ngIf来实现此目的

正如@trichetriche指出这可能是因为div从未被处理过。通过使用隐藏标记，可以避免

Angular 5：使用第三方脚本不能在<div * ngif =“something”>

1 个答案: