如何在Angular 2模板中使用外部Javascript函数？

我在组件中有一个带有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 { }


角度2快速入门
System.import（'app'）.catch（函数（err）{console.error（err）；}）；
加载。。。
使用此
外部js功能有特殊原因吗？
最好使用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;
    }
}

/**app.component.ts*/
从'@angular/core'导入{Component}；
声明函数changeValues（anyArgs:string，canBeHere:string）：void；
@组成部分({
选择器：“我的应用程序”，
模板：`
{{booleanValue？'Yes'：'No'}
2
3
4
`
})
导出类AppComponent{
布尔值：布尔值=真；
构造函数（）{changeValues（…）；}
更改值（）的任何函数{
this.booleanValue=false；
}
}
正如前面的答案所说，您可以在Angular 2中以本机方式完成此操作。但是，以下是如何访问Angular2之外的函数。只需在角度分量中将“窗口”对象声明为常量

//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 {}

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，OnInit}
从“@angular/platform browser”导入{BrowserModule}
常量窗口：any={}；
@组成部分({
选择器：“我的应用程序”，
模板：`
1
2
3
4
`
})
导出类应用程序实现OnInit{
恩戈尼尼特（）{
changeValue（）；
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

这是一个。
您可以使用：

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);
}

抱歉，我编辑了div的名称。忽略布尔值、字符串等。它们没有意义。我在终端中收到一个错误：检测到文件更改。正在启动增量编译。。。[0]app/app.component.ts（6,7）：错误TS1155:“const”声明必须初始化[0]app/app.component.ts（20,5）：错误TS2304:找不到名称“changeValue”。是的，这在plnkr中有效，但可能不在本地，让我看看是否可以创建一个工作的本地示例，我会在有答案时更新它。我仍然得到“app/app.component.ts”（20,5）：错误TS2304:找不到名称“changeValue”错误。我的其他文件是否有其他问题？请尝试使用“window.changeValue（）”而不仅仅是changeValue（）调用它