angular 5+ 实现 smart-app-banner vanilla JS

Question

我正在尝试在我的应用中使用 smart-app-banner，但由于网络上没有针对它的类型，我不知道如何在 Angular 中使用它。

到目前为止，我的 app.component.ts 中有这个：

import * as smartBanner from "smart-app-banner";
let smartBannerInstance = smartBanner();

constructor() {
    new smartBannerInstance({
        daysHidden: 10, // days to hide banner after close button is clicked (defaults to 15)
        daysReminder: 20, // days to hide banner after "VIEW" button is clicked (defaults to 90)
        // appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
        title: "Title",
        author: "Authot",
        button: "VIEW",
        store: {
            ios: "On the App Store",
            android: "In Google Play"
        },
        price: {
            ios: "FREE",
            android: "FREE"
        }
        // force: 'android' // Uncomment for platform emulation
    });
}

但我还是习惯了

Uncaught TypeError: Cannot set property 'options' of undefined at SmartBanner

我怎样才能做到这一点？

Answer 1

因此，在 Angular 应用程序中实现一个简单的 JS 库的整个过程是这样的（在这种特定情况下，它适用于大多数库）：

首先，我们使用 all 选择器导入库，如下所示：

import * as SmartBanner from "../../node_modules/smart-app-banner/dist/smart-app-banner.js";

然后，我们在 AppComponent 类中声明它，然后在构造函数中对其进行初始化。

SmartBanner: any;

constructor() {
    new SmartBanner({
        daysHidden: 10, // days to hide banner after close button is clicked (defaults to 15)
        daysReminder: 20, // days to hide banner after "VIEW" button is clicked (defaults to 90)
        // appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
        title: "Title",
        author: "Author",
        button: "VIEW",
        store: {
            ios: "On the App Store",
            android: "In Google Play"
        },
        price: {
            ios: "FREE",
            android: "FREE"
        }
        // force: 'android' // Uncomment for platform emulation
    });
}

而且效果很好。

如果这是一个性能问题，请任何有进一步了解的人告诉我。