Can we prevent component destruction in a situation like this. Let's say the component is shown using *ngif="condition". When it's true the component is on the screen, but when it's not the component is removed from the screen and its ngOnDestroy is fired.
Is there any way to work around that problem?
Thanks
Related
I am using antd tabs and I have 2 tabs on my page. Both load at the same time but I want only the first tab to load on mount and onchange of tab the other tab should be rendered. I am unable to achieve this functionality.
Is there a way to resolve this issue?
According to the documentation, the default for the forceRender prop on the Tabs.TabPane component in your code should be false.
The prop is used to: Forced render of content in tabs, not lazy render after clicking on tabs:
https://ant.design/components/tabs/
On what basis are you assessing that the content is not lazy rendered? Perhaps you can share some code.
Beyond this, you may want to handle more complex rendering within your component tabs using state.
I hope this helps.
I am building a react site using Material-UI, specifically, the Stepper component.
Is there any way to disable the collapse and expand of each StepContent for vertically oriented Stepper? I want to keep the styles of the component, but I essentually want all content of the stepper to be visible.
An example of a "collapsing" Stepper is here. I simple need to figure out how to disable the collapsing.
I've read the docs back to back and haven't found an obvious way to do this, yet it seems like it should be doable.
Adding TransitionProps={{in: true}} works better and does not produce error in the console because TransitionComponent should to be object, not a string.
It basically sets the collapse component to be always open.
Found the answer Adding TransitionComponent="None" to the StepContent element does exactly this.
This is a pretty common UX design pattern for apps, and I'm trying to figure out how best to implement this in React Native:
Users can switch between navigator scenes without losing their scroll position...
By default, the React Navigator component wants to re-render each scene when the user switches tabs. This has two drawbacks:
For complex scenes, there is a needless delay while the scene re-renders itself.
When the user returns to a scene (e.g. home page), she loses her scroll position and any interim UX state on that scene (e.g. expanded cells, etc)
Question: is there a way to persist scenes between navigator changes that avoids re-rendering them?
I'm using the following component layout for my navigator pattern:
p.s. I know React's flux/routing pattern prefers to re-render the scene because it prefers UX state to be captured entirely in one route state object, but in this case I really want to avoid the disadvantages of re-rendering a panel since it creates a crappier user interface....Instagram is an example of an app which does this seamlessly.
If you are pushing and popping scenes it will re-render them.
To avoid this you can start with all your scenes specified in the Navigator's initialRouteStack property then use the jumpTo(route) method of the navigator to transition between them without unmounting and re-rendering. This should preserve the current state of all the scenes.
By default, the React Navigator component wants to re-render each scene when the user switches tabs.
Where is this from? I'm using Navigator in similar patten, and the secenes is "Persist". I don't know what's wrong because there's no code here (maybe you re-render the Navigator?), but seams react-native-scrollable-tab-view would be helpful in your example case.
Using Flex SDK 4.14.1.
What event is fired when a component comes into view after scrolling a scroller?
I have a mobile app with a scroller component and it has a lot of items (about 4 screens worth of data), now I was wondering if a particular event was fired when these components came into view (drawn on the screen)?
What I want to do is dispatch an event when we get to a certain point down the 'page', but I cannot see any way to do this. I have tried creationComplete, show and addedToStage but they all seem to fire when the view is created, what I want is a solution something like the List component where items are rendered just before they are drawn on the screen.
Any suggestions greatly welcomed as dispatching these events at the start would both be a total waste of bandwidth, and a drain on resources that are valuable.
Thanks
So, in summary, there isn't one? Ah, ok, well that's fair enough.
I ended up putting a -load more- button in and calling my commands from that, works perfectly.
I am asking Apache to put in an event when an item is rendered on the screen, who the hell wants to load all of their data at start?
I am trying to accomplish an "imagemap" in flash where you click on different areas in the image and when you click on it, a popup (within flash) comes up showing more information about the object that was clicked on. The popup has a close button that can will then close the popup.
My biggest trouble is the way I have my code right now is when you click on a region of the map, it creates a popup on the fly, and then I use addChild(_myPopup) to add it to the display list. The problem with this approach for me, is that the Popup is now a Child of the button I just pressed, but this object organization doesn't really make sense to me. I'd like to have the popup not be a child of the button and it be on it's own layer or a child of the stage directly.
What is a good approach and code architecture for building such an organization of objects? I'm fairly new to AS3 and I've built some small applications but my knowledge is limited.
Thanks
UPDATE
ok looks like calling stage.addChild(myPopup) from inside the button works pretty well. Is this good practice?
Assuming you have a hierarchy that looks something like this:
stage
Main class
Image class
Button
It's good practice to never call upwards in the displaylist, every object only deals with it's children. Events however, are a nice way of communicating upwards. Have the Button dispatch an event, preferrably a custom one, then handle that using a listener in the main class that then deals with creating a popup on top of everything.
An often encountered practise to organize the layers of the visible application is:
stage
main class with all children
popup container
tooltip container
mouse cursor container (apparently not longer necessary since player 10 supports custom cursors)
So you create your popups always in the popup container above the main class. If you would have tooltips, they should go into the tooltip container. This approach guarantees that popups are always visible above the main app and tooltips are always visible on top of everything.