When I keep adding pages to navigation stack, more and more instances of SimpleComponent class are created. For this reason I subscribe more than once to "ev" event and fire code more than once.
You can check that by going "there" and "back" in my plunker example and firing event in different situations (check console warnings for results). You can also see that even when you move back to the top of the navigation stack, you still have your subscription.
ionViewWillLeave is not working probably because it's not the actual view that I'm leaving
I wonder what should I do in order to avoid that? I want the SimpleComponent to be included like old-style AngularJS directive as I use it in my application many times.
Here is plunker
export class SimpleComponent {
constructor(private ev: Events) {
this.ev.subscribe('ev', e => {
console.warn(e[0]);
});
}
}
// home.ts template
<simple-component></simple-component>
<button (click)="go()">Go next page</button>
<button (click)="raiseEv()">Raise Event</button>
You can implement OnDestroy and there you can unsubscribe from ev:
import { OnDestroy } from '#angular/core';
export class SimpleComponent implements OnDestroy {
ngOnDestroy() {
this.ev.unsubscribe();
}
From Angular 2 documentation:
Put cleanup logic in ngOnDestroy, the logic that must run before Angular destroys the directive. This is the time to notify another part of the application that this component is going away. This is the place to free resources that won't be garbage collected automatically. Unsubscribe from observables and DOM events. Stop interval timers. Unregister all callbacks that this directive registered with global or application services. We risk memory leaks if we neglect to do so.
I decided to move my code responsible for handling after-event-received action to #Injectable and that solved the issue
Related
I'm trying to do what is here in the source code, but it is not working.
But event is sent but never received.
Here is the simplest example I could make:
in bootstrap.js:
window.events = new Vue();
window.flash = function (message, level = 'success') {
console.log('emit'); // This is working
window.events.$emit('flash', { message, level });
};
Vue.component('flash', require('./vue/components/Flash.vue'));
Flash.vue:
<template>
<div> MY FLASH</div>
</template>
<script>
export default {
created() {
window.events.$on(
'flash', data => alert('event!!!')
);
},
};
</script>
and in my view:
<flash></flash>
I can see in my view the component rendering ie MY FLASH message, but I never get the alert coming from emit!
I also have no error in debugger
Am I missing something? it seems quite simple....
The code in your question sets up a global function called flash that triggers the event. That function has to be called somewhere in order for the event to be triggered.
Here is a codesandbox that demonstrates. Everything except triggering the event is from your code.
Note that the alert will only show if the flash method is called after the Flash component is created.
Also, remember when using a bus to remove the listener when the component is destroyed to prevent adding multiple listeners if the component is created more than once.
This is an old question, but I fall in the same situation, my solution maybe is not the best but is working for me.
Based in this response "Note that the alert will only show if the flash method is called after the Flash component is created." by Bert.
The flash component may have a few uses cases, if you want to use in the same view/page it will be fine, because the component is mounted and still any event hasn't been fired. But if you wan to use in a view/page transition using vue router, you will need to use vuex to store your alert message and then fetch and display the alert.
I am working in Dynamics AX7 form development. I have to write code in 'Clicked' method of a button, but there is already some 'Sys Layer' code in 'Clicked' method. I have to apply some conditions on it. But I don't want to do 'over-layering', i have to do it with Extensions, but if I write code in onClicked event, the problem is, my code runs before or after the sys-layer code, but i need to apply some conditions on that sys-layer code.
my question is, can we achieve this logic with extension event handlers ? I have already done it with over-layering, but I need to do it with extensions. So is it possible to do it with extensions ?
Code is added below.
void clicked()
{
super();
// My logic will be written here
if(result == true) //This is my code, based on above logic I applied this check
{
// start of sys layer code
remainSalesPhysical.realValue(0);
remainInventPhysical.realValue(0);
if (formCtrl)
{
formCtrl.cancelLine();
}
element.closeOk();
// end of sys layer code
} //this is my code
else //this is my code
{ //this is my code
error("Some error message"); //this is my code
} //this is my code
}
Yes and no. If it's just a button then the super() doesn't really do anything, so you can do a pre event handler.
If it's a menu item button, where the super() calls a class, then you would do a post event handler to the class and not the button, so that way your logic runs immediately after the super() call.
And in your class, you can do something like formRun = _xppPrePostArgs.getThis() and then if (formRun.name() == formStr(SalesTable)) or any number of things if the class has multiple entry points.
I have searched about it and what i concluded so far is that, we can't do it 100% without overlayering. We have Pre and Post events but these are unable to cater the above mentioned problem, May be in future we will have some more specific way of doing this, but for now we have three options.
Do overlayering as we did in AX 2012 (which is not recommended)
Do it With Delegates (even with delegates we're restricted to do some overlayering, but it is recommended way)
You can also hide that button and replace it with your own button, but it will work only for Form Controls, we can't do it for methods, as you can't avoid calling them.
I solved my problem using delegates.
Here is a Helpful link I found about it and it helped.
https://ievgensaxblog.wordpress.com/2016/05/01/ax-7-how-to-override-form-data-source-field-methods-without-overlaying/
I have a list of components that contain dates(formatted with toLocaleString()) and other things. On top of them there is a component for creating new components, wich contains a form with some inputfields built with angulars FormBuilder.
When I type fast the validation lags and the text I'm typing isn't displayed immediately.
I assume that Angular is rerendering all components, because if I don't display the date in the other components I can type pretty fast without lags.
Is there a way to only rerender the input field I'm typing in, since all other components cannot change or is toLocaleString() the problem?
Is there a way to only rerender the input field I'm typing in, since all other components cannot change
Yes, for the components that will not change, set the change detection strategy for those components to OnPush. An OnPush component will then only be checked for changes if
any of its input properties changes
it fires an event (e.g., a button click)
an observable (which is an input property or a local-to-the-component property) fires an event, and | async is used in the template with the observable (see plunker in the comments below this answer)
import {Component, Input, ChangeDetectionStrategy} from 'angular2/core';
#Component({
...
changeDetection: ChangeDetectionStrategy.OnPush
})
Also consider listening for changes to your input by subscribing to the valueChanges Observable Angular makes available on your form element if you use ngFormControl. You can then use debounce() to only process changes every second or whatever time frame is appropriate:
<input type=text [ngFormControl]="input1Control">
constructor() {
this.input1Control = new Control();
}
ngOnInit() {
this.input1Control.valueChanges
.debounceTime(1000)
.subscribe(newValue => console.log(newValue))
}
See https://stackoverflow.com/a/36849347/215945 for a working plunker.
That's a known issue https://github.com/angular/angular/issues/6311
See also
https://github.com/angular/angular/issues/5808
https://github.com/angular/angular/issues/7822
https://github.com/angular/angular/issues/7971
There is also a pull request with a proposed fix, but seems not to be included in the latest beta release.
I need to capture data from an instance generated by <template is="dom-repeat"> in Polymer (v1.2.4) and I am not sure what would be the safest way to do so considering the myriad of Shadow DOMs available (client browser might be polyfilled etc).
A simple example:
<template is="dom-repeat" items="[[myItems]]" id="collection">
<paper-card on-tap="handleTap">
(...)
What is the most reliable way to access the model data from the event handler?
1.
handleTap: function(e) {
var data = e.model.get('item.myData');
}
2.
handleTap: function(e) {
var data = this.$.collection
.modelForElement(Polymer.dom(e).localTarget)
.get('item.myData');
}
My concern is that the simplest (#1) option might be working as expected in my environment but can get buggy in other browsers.
And even in option #2, I am not confident if it is really necessary to normalize the event target (as recommended in the official Polymer guide on events) prior to passing it to modelForElement.
Both should work; but, it seems you should fire a custom event though over trying to inspect a child model. What ever component that has "item.myData" should fire a custom event on tap with "item.myData" as part of the event. Then you should setup a listener for that custom event.
See custom events for more details.
I am developing a Windows Phone7 application in which I have two App bar buttons both when clicked makes Asynchronous calls to Web and Callbacks will be performed upon the Web response.
Now my problem is, if I click on one button and as the Async operation is going on in the background ans meanwhile if I click on another button both callbacks are executing one after the other, which is not good for obvious reasons. Could any one help me on how to handle this???
First I thought to disable other buttons when 1 Async operation is going. But it doesnt give good feel for user. So what will be the best way to handle this problem??
You can use a Flag variable and check its value within the async call complete method. Based on your requirement you can choose to update or not update the view.
I was looking for the same answer.
I have found the solution, If you initialize an object inside a constructor like this, you will get multiple loops when you call a service function:
public partial class MainPage : PhoneApplicationPage
{
MovieServiceClient mov;
public MainPage()
{
mov = new MovieServiceClient(); //Don't do this.
InitializeComponent();
}
}
Avoid that.