I'd like to be able to pass some data\\propagate events from a plugin on the page to my Angular 4 app.
More specifically, in my case data\\events are generated inside a Silverlight plugin app that is next to the Angular app on the page.
I have the following solution in my mind:
As an illustration to that (excluding the Silverlight part), we could have the following.
A method as an entry point on the Angular side:
export class SomeAngularClass {
public method(data: any): void {
...
}
}
And somewhere outside the Angular realm, we add a global plain JavaScript function (to be called by Silverlight):
window.somePlainJsFunction = function (data) {
// How to consume SomeAngularClass.method() from here?
}
The question is: how can we call the Angular class methods from a plain JavaScript function?
As pointed by @Dumpen, you can use @HostListener to get the custom event dispatched from javascript outside of Angular. If you also want to send parameters, then you can send them by adding them as detail object.
In Javascript:
function dispatch(email, password) {
var event = new CustomEvent('onLogin', {
detail: {
email: email,
password: password
}
})
window.dispatchEvent(event);
}
Then you can call this method on button click.
Now to listen to this dispatched event in Angular, you can create function in Angular component and add @HostListener to it like below:
@HostListener('window:onLogin', ['$event.detail'])
onLogin(detail) {
console.log('login', detail);
}
This code you can add in any component. I have added it to my root component - AppComponent
You can use a events, so you have the JavaScript send an event that you are listening for in your service.
The CustomEvent is a new feature so you might need to polyfill it: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
JavaScript:
var event = new CustomEvent("CallAngularService");
window.dispatchEvent(event);
Angular:
@HostListener("window:CallAngularService")
onCallAngularService() {
// Run your service call here
}
I think this is what you are looking for service out side angular
You can create function/class outside Angular and provide as a value in the angular. in this way you can handle both angular and non angular stuffs together:
class SomePlainClass {
...
}
window.somePlainJsFunction = new SomePlainClass();
@NgModule({
providers: [{provide: SomePlainClass, useValue: window.somePlainJsFunction}],
...
})
class AppModule1 {}
@NgModule({
providers: [{provide: SomePlainClass, useValue: window.somePlainJsFunction}],
...
})
class AppModule2 {}
class MyComponent {
constructor(private zone:NgZone, private SomePlainClass:SharedService) {
SomePlainClass.someObservable.subscribe(data => this.zone.run(() => {
// event handler code here
}));
}
}
The way it should be done depends on particular case, especially on the precedence.
If Silverlight aplication is initialized before Angular application, and window.somePlainJsFunction
is called before finishing Angular application initialization, this will result in race condition. Even if there was an acceptable way to get Angular provider instance externally, the instance wouldn't exist during somePlainJsFunction
call.
If window.somePlainJsFunction
callback is called after Angular bootstrap, window.somePlainJsFunction
should be assigned inside Angular application, where SomeAngularClass
provider instance is reachable:
window.somePlainJsFunction = function (data) {
SomeAngularClass.method();
}
If window.somePlainJsFunction
callback is called before Angular bootstrap, it should provide global data for Angular application to pick up:
window.somePlainJsFunction = function (data) {
window.angularGlobalData = data;
}
Then window.angularGlobalData
can be used inside Angular, either directly or as a provider.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.