如何在Angular 2模板中使用外部Javascript函数？
[英]How to use external Javascript function in Angular 2 template?
问题描述
I have a template in the component with 4 div tags. 
我在组件中有一个带有4个div标签的模板。 The JavaScript function I want to call, changeValue() , is supposed to change the content of the first div from 1 to Yes! 我要调用的JavaScript函数changeValue()应该将第一个div的内容从1更改为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 : 我是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>
3 个解决方案
解决方案1
2 2016-08-22 14:39:05
Is there a special reason to use this external js function ? 是否有特殊原因使用此外部external js function ？ It would be better to use Angular's binding methods to solve your problem.. 最好使用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;
}
}
解决方案2
0 2016-08-22 14:53:12
Like the previous answer said, you can do this natively in Angular 2. However, here is how you can access functions outside of Angular2. 就像之前的回答所说的那样，你可以在Angular 2中本地完成这个。但是，这里是你如何访问Angular2之外的函数。 You just need to declare the "window" object as a constant in your Angular component. 您只需要将“window”对象声明为Angular组件中的常量。
//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 . 这是一个有效的例子 。
解决方案3
-1 2017-02-09 19:53:12
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);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.