There is a similar question already answered (more than once) How to set default child view with Angular UI Router. I am not sure how can the answer which is based on an non-intuitive rule:
Using an empty url means that this child state will become active when its parent's url is navigated to. Urls of child states are automatically appended to the urls of their parent.
be further extended to include the solution for my case where I want the grand-child state become active when the grand-parent is selected. Specifically, I have the abstract state named 'root', then one of its first level children is named 'root.son" which has several children of its own: 'root.son.grandson1', ', 'root.son.grandson2', etc.
Here is the graphical depiction of this same situation:
Instead I want the content of the Overview tab (grandson of Health Data) to be which as the consequence of the click on Health Data Menu Item as shown below:
Note that this second image was created by clicking on the "Overview" tab in the situation depicted on the first image.
Related
I have written a react component composed of two child components. All three are functional components which utilize hooks.
Think of a visit to Amazon searching for a video card. On the left are filters you might use: resolution, type of connection, number of connections, etc. As you choose filter values the component to the right displays applicable thumbnails for those items matching your selected criteria.
When clicking on one of the thumbnails, the parent and children (filter and thumbnails) windows are replaced with a detail component. The original window is not visible. Hitting the back key, the original components, including the selected filters and thumbnails, should be as before.
However, when hitting the back-key, the original component with its children displays without any of the selected filters.
I am using react v16.11.0 and react-router-dom v5.1.2.
Clearly I am lost. Can anyone suggest an approach?
I used rather than . The router was not recording the transition in history. I was already at the route to which I wished to navigate before hitting the back-key.
Context
I'm building a social network based on a parent/children relationship. It looks like a hierarchical pyramidal tree like this :
User Interface
Here is a first shot at the user interface :
The main part (big white block in the middle) is the user "wall" (as the facebook wall), with some specific fonctionalities.
The top home button is a link to the parent user.
The bottom buttons are links to children users
Navigation Animations / Transitions
I just discovered Meteor and React and feel now able to make the navigation awesome !
The idea is that when you click on a user button (parent or child), the button becomes the central wall div, a new parent user button appears from the top, old children buttons disappear and new children button appaears from aside. If needed, i'll try to make a gif.
The problem
User buttons and member wall are the same component with different state, "parent'/"current"/"child" with associated css class.
Clicking a children button or parent button will change the URL, we will go from "member/iduser1" to "member/iduser2". So the idea is to load the missing components and change the state of the ones already present on the page.
I can pass an array of children ids, the current id and the parent id to the wrapper in order to build the different components, but won't they be completly rebuild ? My goal is just to change their status
I'm trying to create single page application and one use case is i have details page which can be triggered from multiple parent pages, more like acting as modal box but without any absolute property. I was checking how to show/hide based on the state change from parent.
This is what i have done till now
http://plnkr.co/edit/t34ES8lUihcypetHF0rp?p=preview
If you take a look when clicking View Home from home DOM is not removed while navigating to next state .
But if you are in About Page and click View About, DOM is getting removed.
How can we show/hide ui-view. if we are navigating to different state with same url ?
The same url
url: '^/details/:id',
for both the states is the issue.
Try having a wrapper state say "details" and then in that state's controller you may redirect based on some parameter that tells wrapper state which state to go to.
I'm building a dashboard/control panel app that is basically made up of two tabs (bootstrap) at the root level, called "dispatch" and "admin". Each tab has a good bit of its own multi-tiered navigation and functionality, and they don't need to directly interact with each other. The problem I'm running into is how to deep-link to sub-views within one of the tabs without losing the "state" of the inactive tab. To clarify, I can achieve this just fine if I don't worry about updating the URL, but when I try to add deep-linking, that's when I get stuck.
An example of the desired behavior:
When you click on the "Admin" tab, the route becomes "/admin"
Click on a sub-nav item, route becomes "/admin/foo"
Select 3rd-tier sub-level item, route becomes "admin/foo/thing1"
Click on the "dispatch" tab, route becomes "/dispatch"
Click back on the "admin" tab, route goes back to "admin/foo/thing1"
So basically, if you're at the "admin/foo/thing1" route in the middle of filling out a text field, then switch to another tab, then switch back, the text field should still be there just as you left it.
Like I said, the problem isn't switching from tab to tab, since by default the tabs just show and hide things on the page without reloading any views dynamically. I just don't know how to deep-link to a given tab's "bookmarked" position when you switch to it. The way I keep thinking of it is that clicking on a tab should only update the first segment of the URL(/admin or /dispatch), and then some sort of $watch function would update the remaining segments based on the last "location" within that tab. Would something like that work?
Also, I'm using ui-router to handle all my routing and states, so I have to factor that into how I'm going to handle the desired behavior.
Help?
I worked on both those topics (deep state reactivation and parallel states) and integration into ui-router. Grab my github fork of ui-router and build using grunt. Then, mark your two tab states as parallel: true and deepStateRedirect: true.
Git repo: https://github.com/christopherthielen/ui-router
Example plunker: http://plnkr.co/edit/YhQyPV?p=preview
Discussion: https://github.com/angular-ui/ui-router/issues/894
I would just save the current state in a variable, then either dynamically change the link of the tab to whatever the last subview was.
For example, if the user is on /admin/billing, the Admin tab would link to admin/billing. When they leave that tab, the /admin tab remains the same. If you are using ui-router, you can do this with ui-srefs. You could also just manually check the variable when the state changes, and route the user there from the controller.
I have an app with a Sidebar, which is its own module with its own region, and a primaryRegion that can show views from two other modules (a Dashboard view or a Detail view of an item selected from the sidebar).
When an item gets clicked in the Sidebar, it changes its display to show that it's been selected and gets displayed in the primaryRegion.
The problem I'm running into is that I've recently added routes to the app to directly display item details in the primaryRegion and I can't maintain this behavior when going directly to the Detail view for a given item.
Given that only one module can respond to a route, how can I get the Sidebar to select the item designated in the URL and also display that item's Detail view in the primaryRegion without using a global object or introducing race conditions?
Apologies for the lack of code, I'm having a hard time reducing it down to the essential parts while keeping it clear. Hopefully my description is good enough but if not please let me know and I'll provide more detail.
I can think of two options you could try:
Have Detail fire a global event when it renders, and have the Sidebar be listening for that event and highlight the correct item based on the data it gets from that event.
Or have your Sidebar handle the routing and use a variable route to determine what Detail to render. For example, have a route in the Sidebar of 'details/:id': showDetails' and then a function like:
-
showDetails: function(id) {
// highlight item with id === id here
this.primaryRegion.show(new Details(id));
}