时间戳

首页 > 解决方案 > angular 5+ implement smart-app-banner vanilla JS

javascript - angular 5+ implement smart-app-banner vanilla JS

问题描述

I am trying to use smart-app-banner in my app, but since there are no typings on the web for it, I don't know how to use it within angular.

So far I've got this in my 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
    });
}

But I get the usual

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

How can I make this work?

标签： javascriptangularangular-clismart-app-banner

解决方案

So, the whole deal with implementing a simple JS library into an Angular application goes like this (in this specific case that is, but it will work for most libraries):

First, we import the library by using the all selector as follows:

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

Then, we declare it inside our AppComponent class and then we initialize it within the constructor.

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
    });
}

And it works perfectly.

If this is somewhat of a performance issue, please anyone that has further knowledge, let me know.

推荐阅读