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

Question

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

 /**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();

Answer 1

使用这个有什么特殊原因吗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;
    }
}