Выполните следующие шаги в своем компоненте: -
1) First add a reference of your external JS file for importing it to the component.
Import * as abcJS from '/YourExternalJS.js';
2) Now declare a "var" of the same name that your function has inside external JS.
declare var cartstack_updatecart: any;
3) ngOninit(){
cartstack_updatecart();
}
4) Do remember that your JQuery should be loaded first than your external JS file.
Я вызвал эту функцию на ngoninit lifecycleHook. Кроме того, вместо объявления внешнего JS-файла внутри Index.html, я бы предпочел вам объявить его в файле angular-cli.json в массиве скриптов. Всего наилучшего.
В элементах DOM нет цепных методов установки, и они все равно не будут намного короче. Но не повторяйте доступ element.style
каждый раз! Просто напишите
const element = document.createElement('div');
element.id = 'element';
const style = element.style;
style.position = 'absolute';
style.width = '100%';
style.height = '100%';
style.left = '0';
style.top = '0';
style.zIndex = '10000';
В качестве альтернативы используйте Object.assign
, если вы не хотите прописывать эти многочисленные присвоения свойств:
const element = document.createElement('div');
element.id = 'element';
Object.assign(element.style, {
position: 'absolute',
width: '100%',
height: '100%',
left: '0',
top: '0',
zIndex: '10000',
});
И, наконец, что не менее важно, вы можете просто назначить Строка CSS для свойства style
напрямую (но обратите внимание, что это часто считается плохой практикой для уже существующих элементов):
const element = document.createElement('div');
element.id = 'element';
element.style = 'position:absolute; width:100%; height:100%; left:0; top:0; zIndex:10000;';
или даже
const element = Object.assign(document.createElement('div'), {
id: 'element',
style: 'position:absolute; width:100%; height:100%; left:0; top:0; zIndex:10000;',
});
Вы можете использовать синтаксис объекта и инкапсулировать ваши стили
const style1 = {
position: 'absolute',
width: '100%',
height: '100%',
left: '0',
top:'0',
zIndex: '10000'
}
element.id = 'element';
element.style = style1;
Затем вы можете делать такие вещи, как использовать этот объект в качестве объекта базовых стилей и заменять значения, используя синтаксис es6, т. Е.
newStyles = {
...styles,
width: '30%',
height: '30%',
}
Document API не позволяет создавать цепочки, как вы предлагаете, если ваша цель состоит в том, чтобы уменьшить количество строк кода, вышеупомянутое решение позволит это сделать ваш код многократно используемым и расширяемым;
[116 ] https://developer.mozilla.org/en-US/docs/Web/API/Document