我在组件中有一个带有4个div标签的模板.我要调用的
JavaScript函数changeValue()应该将第一个div的内容从1更改为Yes！.我是TypeScript和Angular 2的新手,所以我不知道如何让模板与dtest2.js中的函数进行交互：
/**app.component.ts */
import { Component } from '@angular/core';
@Component({
selector: 'my-app',template: `
<div id="boolean"><p id="bv">1</p></div>
<div id="numeric"><p id="nv">2</p></div>
<div id="string"><p id="sv">3</p></div>
<div id="enum"><p id="ev">4</p></div>
`
})
export class AppComponent { }
//dtest2.js
function changeValue(){
var newVal= "Yes!";
document.getElementById("bv").innerHTML= newVal;
}
changeValue();
<html>
<head>
<title>Angular 2 QuickStart</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-Metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="file:^html/angular/app/bs.min.js"></script>
<script src="file:^html/dtest2.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
解决方法
是否有特殊原因使用此外部js功能？
最好使用Angular的绑定方法来解决你的问题.
最好使用Angular的绑定方法来解决你的问题.
/**app.component.ts */
import { Component } from '@angular/core';
declare function changeValues(anyArgs: string,canBeHere: string) : void;
@Component({
selector: 'my-app',template: `
<div id="boolean"><p id="bv">{{booleanValue ? 'Yes' : 'No'}}</p></div>
<div id="numeric"><p id="nv">2</p></div>
<div id="string"><p id="sv">3</p></div>
<div id="enum"><p id="ev">4</p></div>
`
})
export class AppComponent {
booleanValue: boolean = true;
constructor() { changeValues(...); }
anyFunctiontochangeTheValue() {
this.booleanValue = false;
}
}
