Как реализовать функцию js в компоненте Angular 2

У меня есть веб-страница, и я хочу улучшить ее с угловым 2, и я хотел бы использовать мои функции JS в угловом компоненте, это пример того, что я есть:Как реализовать функцию js в компоненте Angular 2

это мой app.component.ts:

import { Component } from '@angular/core'; 

@Component({ 
selector: 'myApp', 
template: ` 
    <div> 
     <label for="Hour">Start:</label> 
     <select id="Hour" class="form-control"> 
     </select> 
    </div> 
    ` 
}) 
export class MyApp {}

тогда у меня есть JS с функцией, которая заполнит выбрать с внутрипартийной HTML:

function fillValues() { 
var d = new Date(); 
var n = d.getHours(); 
var options = ""; 
for (var i = 0; i <= 23; i++) { 
    if (i == n) { 
     options += "<option id=" + i + " value=" + i + " selected>" + i + "</option>"; 
    } else { 
     options += "<option id=" + i + " value=" + i + ">" + i + "</option>"; 
    } 
} 
document.getElementById('Hour').innerHTML = options; 
}

и в index.html Я вызываю компонент an d, ИС:

<body> 
    <myApp>Loading...</myApp> 
    <script src=“assets/js/my_js.js”></script> 
</body>

мой вопрос, как я могу по-прежнему использовать свои функции JS и использовать их в своих компонентах?

источник

2016-10-24 Carlos Campos

Ничто не мешает вам использовать ваши старые функции так же, как и раньше. –

Я предлагаю переосмыслить этот код в терминах «Угловой», так что вы привязываете опции выбора к массиву чисел, а не устанавливаете «innerHTML» для выбора вручную. –

Поскольку все JS действительны в машинописном машинописном виде, вы можете без проблем получить доступ к своей функции JS. Поскольку вы включили файл сценария в свой index.html, вам нужно сообщить Typcript, что функция существует, чтобы вы могли ее назвать, вы можете сделать это, поместив;

declare var fillValues: any;

после ваших заявлений о ввозе. Затем вы можете вызвать функцию как обычно из вашего компонента. Вероятно, вы захотите сделать это в ngAfterViewInit() в этом случае, см. Lifecyle Hooks Docs для более подробной информации.

Если вы хотите получить доступ к элементу <select> непосредственно в машинописном тексте, вы можете сделать это несколькими способами, например @ViewChild. См. Это question для получения более подробной информации о том, как это сделать.

источник

2016-10-24 20:17:17

Как реализовать функцию js в компоненте Angular 2

ответ

Смежные вопросы