typescript 如何在 Angular 2 模板中使用外部 Javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39082058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use external Javascript function in Angular 2 template?
提问by xdc17
I have a template in the component with 4 div tags. The JavaScript function I want to call, changeValue(), is supposed to change the content of the first div from 1to Yes!. I'm new to TypeScript and Angular 2, so I'm not sure how I can get the template to interact with the function from dtest2.js:
我在组件中有一个带有 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>回答by mxii
Is there a special reason to use this external js function?
It would be better to use Angular's binding methods to solve your problem..
使用它有什么特殊原因external js function吗？最好使用 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;
}
}
回答by Ben Richards
Like the previous answer said, you can do this natively in Angular 2. However, here is how you can access functions outside of Angular2. You just need to declare the "window" object as a constant in your Angular component.
就像前面的答案所说的，您可以在 Angular 2 中本地执行此操作。但是，这里是您如何访问 Angular2 之外的函数的方法。您只需要在 Angular 组件中将“window”对象声明为常量。
//our root app component
import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
const window: any = {};
@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 App implements OnInit {
ngOnInit() {
changeValue();
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Here is a working example.
这是一个工作示例。
回答by Vij
You can use:
您可以使用：
import { Component,ElementRef } from '@angular/core';
constructor(private elementRef:ElementRef) {};
ngAfterViewInit() {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "./app/custom.js";
this.elementRef.nativeElement.appendChild(s);
}
