Angular 2テンプレートで外部Javascript関数を使用するにはどうすればよいですか？

4つのdivタグを持つコンポーネントがテンプレートにあります。呼び出したいJavaScript関数changeValue()は、最初のdivの内容を1からYes!に変更することになっています。特別な存在ですAngular 2テンプレートで外部Javascript関数を使用するにはどうすればよいですか？

/**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>

出典

2016-08-22 xdc17

：私は活字体、角2へ新しいので、私は私がdtest2.jsから機能と対話するためのテンプレートを得ることができるかどうかはわかりませんこれを使用する理由はexternal js functionですか？前の回答が言ったように、あなたはしかし、角度2でネイティブにこれを行うことができ、ここであなたがAngular2の外の機能にアクセスする方法である

/**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; 
    } 
}

出典

2016-08-22 14:39:05 mxii

申し訳ありませんが、私はdiv要素の名前を編集しました。ブール値、文字列などを無視します。彼らは無意味です。 – xdc17

私の編集を見てください：その機能を宣言してください。 – mxii

..あなたの問題を解決するために角度の結合法を使用する方が良いだろう。 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 {}

はworking exampleです。

出典

2016-08-22 14:53:12

端末にエラーが発生しました：ファイルの変更が検出されました。増分コンパイルの開始... [0] app/app.component.ts（6,7）：エラーTS1155： 'const'宣言を初期化する必要があります [0] app/app.component.ts（20,5）：エラーTS2304：名前 'changeValue'を見つけることができません。 – xdc17

ええ、これはplnkrで動作しますが、ローカルではないかもしれませんが、実際のローカルサンプルを作成できるかどうか確認してください。 –

これでうまくいくはずです。 –

-1

あなたは使用することができます。

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

出典

2017-02-09 19:53:12 Vij

Angular 2テンプレートで外部Javascript関数を使用するにはどうすればよいですか？

答えて

関連する問題