Привет, разработчики, Angular4 нас очень удивил. Но есть несколько элементов, над которыми нам нужно работать. Как правило, нам всегда нужна поддержка со стороны внешнего файла JS или CSS, чтобы ускорить процесс разработки.

Возьмем файл app.component.ts.

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Вот как мы настраиваем наш компонент. Но нет абсолютно прямого способа включить какие-либо внешние зависимости. Вот некоторые из них: импорт карт Google, библиотеки выбора даты и времени, плагины галереи и многое другое ...

Теперь мы создадим простую функцию для загрузки этих библиотек и получения обратного вызова при их загрузке.

public load(callback, ...urls) {
    let count = 0;
    let element;
        if(url.endsWith(".js")) {
            element = document.createElement('script');
            element.src = url;
            element.type = 'text/javascript';
            element.async = true;
        }
        if(url.endsWith(".css")) {
            element = document.createElement('link');
            element.rel = "stylesheet";
            element.href = url;
        }
        if(callback) {
            element.addEventListener("load", function() {
                count++;
                if(count==urls.length) {
                    callback(urls);
                }
            });
        }
        document.getElementsByTagName('head')[0].appendChild(element);
    }
}

Вы можете использовать эту функцию в сервисе, доступном для всего вашего приложения, или где угодно. Передайте URL-адреса зависимостей, и вы получите уведомление, когда они закончат загрузку.

Обсуждаем пример плагина галереи света

ngOnInit() {
    this.load(this.loaded, 
    "https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/js/lightgallery.min.js", 
    "https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/js/lightgallery-all.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.1/css/lightgallery.min.css");
}
public loaded(urls) {
    console.log("All URLs are now loaded");
    $("#lightgallery").lightGallery({
        hash: false,
    });
}

Вы можете использовать ту же технику с Загрузка карт Google…

ngOnInit() {
    this.load(this.loaded, 
    "https://maps.googleapis.com/maps/api/js?key=YOUR_MAP_API_KEY");
}
public loaded(urls) {
    let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        scrollwheel: false,
        disableDoubleClickZoom: false,
        draggable: true
    });
}

Дальнейшие настройки можно выполнить с помощью
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Теперь у вас все готово для загрузки любого количества зависимостей в ваше приложение и выполнения вашего кода только тогда, когда они загружены. Удачного кодирования 🙂