Wie teile ich einen Wert mit einer globalen Variable von Angular2-Komponente zu einer Javascript-Methode

Question

Ich möchte auf eine globale Javascript-Variable innerhalb angular2 Komponente und umgekehrt zugreifen. Ich gebe den Standardwert in index.html innerhalb des Skript-Tags, ich kann diesen Wert innerhalb der angular2-Komponente lesen. aber wenn ich einen anderen Wert für diese Variable innerhalb der angular2-Komponente bearbeite/neu zuweisen, konnte ich den bearbeiteten Wert nicht in javascript aufrufen/abrufen.

Ich boostraping in main.ts

export function main(dateColumnName: any) 
{ 
    platformBrowserDynamic([{ provide: 'dateColumnName', useValue: dateColumnName }]).bootstrapModule(AppModule) 
} 

In Index.HTML ich wie am Import von unten

<script> 
     var dateColumnName = "WEEK_END_DT";//assigned with default value 
     System.import('app/main').then((module) => { 
      module.main(dateColumnName); 
     }); 

     function myFunc() 
     { 
      alert(dateColumnName);//I need to access the edited value from here... 
     } 
</script> 

In meinem AppComponent, ich injizieren, um die Variable in dem Konstruktor als

export class AppComponent{ 

dateColumnName : any; //Local variable 

constructor( @Inject('dateColumnName') _dateColumnName: string) 
{ 
_dateColumnName --> this input parameter contains the value specified in the index.html 
} 

method1() 
{ 
    this.dateColumnName = "NewValue"//This newly assigned value to be accessed in index.html 
} 

Ich muss einen Wert innerhalb meiner angular2-Komponente neu zuweisen und diesen Wert von einem Javasc verwenden ript-Methode ... im Grunde möchte ich etwas Wert von angular2 zu Javascript teilen ...

was ist es, dass ich hier vermisse? Wie wird die Variable neu zugewiesen?

Answer 1

Verwenden Sie das Fenster Objekt. in Ihrer index.html haben Sie eine globale Variable:

<script type="application/javascript"> 
var testGlobalVar = 'initial value'; 
</script> 

in der Klasse der Komponente:

import { Component } from '@angular/core'; 

declare var window: any; //DON'T FORGET ABOUT THIS ONE!!! 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    constructor() { 
    } 

    getGlobalVarValue() { 
    console.log('testGlobalVar: ', window.testGlobalVar); 

    return window.testGlobalVar; 
    } 

    setGlobalVarValue(value: string) { 
    window.testGlobalVar = value; 
    return window.testGlobalVar; 
    } 
} 

und Template/html der Komponente:

<a (click)="getGlobalVarValue()">get global var value</a> 
<br /> 
<a (click)="setGlobalVarValue('new value from angular2')">set global var value</a> 

oder Sie können direkt zugreifen globale Variable ohne über Fenster zu gehen Objekt:

import { Component } from '@angular/core'; 

declare var testGlobalVar: any; // WITHOUT WINDOW OBJECT 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    constructor() { 
    } 

    getGlobalVarValue() { 
    console.log('testGlobalVar: ', testGlobalVar); 

    return testGlobalVar; 
    } 

    setGlobalVarValue(value: string) { 
    testGlobalVar = value; 
    return testGlobalVar; 
    } 
} 

Um eine bessere Struktur zu haben, die mit globalen Eigenschaften/Variablen/Methoden funktioniert, würde ich einen separaten Dienst erstellen und ihn injizieren (Abhängigkeitsinjektion)!

Answer 2

Sie können zwischen den Komponenten mit der Kind-Eltern-Beziehung oder über den Dienst kommunizieren.

https://angular.io/docs/ts/latest/cookbook/component-communication.html

Aber es gibt einen Weg durch NGRX/store. Dieses Konzept ähnelt Redux. du kannst es versuchen.