Angular 2コンポーネントでjs関数を実装する方法

Webページがあり、これを角2で改良したいと思います。角度コンポーネントでJS関数を使用したいと思います。これは私の例です持っている：Angular 2コンポーネントでjs関数を実装する方法

これは私の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 {}

その後、私は内側のHTMLでの選択を記入します機能と私のJSを持っている：

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コンポーネントを呼び出すd JS：

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

私のJS機能を使用してコンポーネント内で使用するにはどうすればよいですか？

出典

2016-10-24 Carlos Campos

以前のように古い関数を呼び出すことを止めることはありません。 –

私は選択のinnerHTMLを手動で設定するのではなく、数値の配列に選択のオプションをバインドするように、Angularに関してこのコードを再考することをお勧めします。 –

すべてのJSが有効なTypescriptなので、問題なくJS関数にアクセスできます。スクリプトファイルをindex.htmlに含めたので、関数を呼び出せるように関数が存在することをTypescriptに伝える必要があります。

declare var fillValues: any;

あなたのインポートステートメントの後。その後、コンポーネントから関数を呼び出すことができます。この場合、ngAfterViewInit（）でこれを行う可能性があります。詳しくは、Lifecyle Hooks Docsを参照してください。

<select>要素にtypescriptで直接アクセスするには、さまざまな方法があります（@ViewChildなど）。これを行う方法の詳細については、questionを参照してください。

出典

2016-10-24 20:17:17

Angular 2コンポーネントでjs関数を実装する方法

答えて

関連する問題