javascript - change - ¿Cómo exponer públicamente los métodos angulares 2?

remove html tags javascript

Question

Actualmente estoy trabajando en la conversión de un proyecto Backbone a un proyecto Angular 2 (obviamente con muchos cambios), y uno de los requisitos del proyecto requiere que ciertos métodos sean accesibles públicamente.

Un ejemplo rápido:

Componente

@component({...})
class MyTest {
    private text:string = '''';
    public setText(text:string) {
        this.text = text;
    }
}

Obviamente, podría tener <button (click)="setText(''hello world'')>Click me!</button> , y me gustaría hacer eso también. Sin embargo, me gustaría poder acceder a él en público.

Me gusta esto

<button onclick="angular.MyTest.setText(''Hello from outside angular!'')"></click>

O esto

// in the js console
angular.MyTest.setText(''Hello from outside angular!'');

De cualquier manera, me gustaría que el método fuera expuesto públicamente para que pueda ser llamado desde fuera de la aplicación angular 2.

Esto es algo que hemos hecho en la red troncal, pero creo que mi Google Foo no es lo suficientemente fuerte como para encontrar una buena solución para esto utilizando angular.

Preferiríamos solo exponer algunos métodos y tener una lista de apis públicos, por lo que si tiene consejos para hacerlo también, sería un bono adicional. (Tengo ideas, pero otras son bienvenidas.)

Answer 1

Así es como lo hice. Mi componente se da a continuación. No te olvides de importar NgZone. Es la parte más importante aquí. Es NgZone que permite entender angularmente fuera del contexto externo. La ejecución de funciones a través de la zona le permite reingresar a la zona angular desde una tarea que se ejecutó fuera de la zona angular. Lo necesitamos aquí ya que estamos tratando con una llamada externa que no está en la zona angular.

 import { Component, Input , NgZone } from ''@angular/core'';
 import { Router } from ''@angular/router'';

    @Component({
        selector: ''example'',
        templateUrl: ''./example.html'',
    })
    export class ExampleComponent {
            public constructor(private zone: NgZone, private router: Router) {

//exposing component to the outside here
//componentFn called from outside and it in return calls callExampleFunction()
        window[''angularComponentReference''] = {
            zone: this.zone,
            componentFn: (value) => this.callExampleFunction(value),
            component: this,
        };
    }

    public callExampleFunction(value: any): any {
        console.log(''this works perfect'');
        }
    }

ahora llamémoslo desde afuera. En mi caso, quería llegar aquí a través de las etiquetas de script de mi index.html. Mi index.html se encuentra a continuación.

<script>

//my listener to outside clicks
ipc.on(''send-click-to-AT'', (evt, entitlement) => 
electronClick(entitlement));;

//function invoked upon the outside click event

 function electronClick(entitlement){
//this is the important part.call the exposed function inside angular 
//component

    window.angularComponentReference.zone.run(() =
    {window.angularComponentReference.componentFn(entitlement);});
 }
</script>

si solo escribe lo siguiente en la consola del desarrollador y pulsa enter, se invocará el método expuesto y se imprimirá ''esto funciona perfecto'' en la consola.

 window.angularComponentReference.zone.run(() =>
{window.angularComponentReference.componentFn(1);});

el derecho es solo un valor que se pasa aquí como un parámetro.

Answer 2

El problema es que los componentes de Angular se transfieren a módulos que no son tan fáciles de acceder como el código JavaScript normal. El proceso de acceso a las características de un módulo depende del formato del módulo.

Una clase Angular2 puede contener miembros estáticos que pueden definirse sin crear una instancia de un nuevo objeto. Es posible que desee cambiar su código a algo como:

@component({...})
class MyTest {
    private static text: string = '''';
    public static setText(text:string) {
        this.text = text;
    }
}

Answer 3

Estaba revisando el código y me he dado cuenta de que probablemente la Zona no es necesaria. Funciona bien sin el NgZone.

En constructor de componentes haga esto:

constructor(....) {
   window[''fncIdentifierCompRef''] = {
      component  = this
   };
}

Y en el script de root intente esto:

<script>
function theGlobalJavascriptFnc(value) {
  try {
    if (!window.fncIdentifierCompRef) {
      alert(''No window.fncIdentifierCompRef);
      return;
    }
    if (!window.fncIdentifierCompRef.component) {
      alert(''No window.fncIdentifierCompRef.component'');
      return;
    }  
    window.fncIdentifierCompRef.component.PublicCmpFunc(value);
  } catch(ex) {alert(''Error on Cmp.PublicCmpFunc Method Call'')}  
}
</script>

Esto me funciona.

Answer 4

Simplemente haga que el componente se registre en un mapa global y podrá acceder a él desde allí.

Utilice el constructor o ngOnInit() o cualquiera de los otros ngOnInit() del ciclo de vida para registrar el componente y ngOnDestroy() para anular el registro.

Cuando llama a métodos Angulares desde fuera de Angular, Angular no reconoce el cambio de modelo. Para esto está Angulars NgZone . Para obtener una referencia a la zona Angular, simplemente inyecte al constructor

constructor(zone:NgZone) {
}

También puede hacer que la zone esté disponible en un objeto global o simplemente ejecutar el código dentro del componente dentro de la zona.

Por ejemplo

calledFromOutside(newValue:String) {
  this.zone.run(() => {
    this.value = newValue;
  });
}

o utilizar la referencia de zona global como

zone.run(() => { component.calledFromOutside(newValue); });

https://plnkr.co/edit/6gv2MbT4yzUhVUfv5u1b?p=preview

En la consola del navegador, debe cambiar de <topframe> a plunkerPreviewTarget.... porque Plunker ejecuta el código en un iFrame . Entonces corre

window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.callFromOutside(''1'');})

o

window.angularComponentRef.zone.run(() => {window.angularComponentRef.componentFn(''2'');})