Question

我有一个网页，我想用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 {}

然后我的JS有一个函数，它将使用inner-html填充select：

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中调用组件和JS：

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

我的问题是，我怎样才能使用我的JS函数并在我的组件中使用它们？

Answer 1

由于所有JS都是有效的Typescript，因此您可以毫无问题地访问JS函数。当您在index.html中包含脚本文件时，您需要告诉Typescript该函数存在以便您可以调用它，您可以通过放置来实现;

declare var fillValues: any;

导入语句后

。然后，您可以从您的组件正常调用该函数。在这种情况下，您可能希望在ngAfterViewInit（）中执行此操作，有关详细信息，请参阅Lifecyle Hooks Docs。

如果要直接在typescript中访问<select>元素，可以通过多种方式执行此操作，例如@ViewChild。有关如何执行此操作的详细信息，请参阅此question。

如何在Angular 2组件

1 个答案: