I was experimenting with React router 4 to make sure I could programmatically change routes using router.history.push from my top level App. For example, if I need to do so after an async action, etc. The mui App renders a Wrapper, which displays an AppBar and Drawer/Menu, then renders its children which is a single <Switch> element in this case. The App grabs the router from context (I know I could use withRouter, but I was just trying this out). If the Menu internally uses <Link> elements, it works as expected and the Switch displays the expected route. However, if the menu dispatches routes to the App, and it pushes them via the router, then the URL changes but the switch does NOT update, even though the Wrapper.render is called.
I recreated the situation in this sandbox, where the Menu for Page 2 uses a Link, but the Home and Page 1 items dispatch the routes up to the App. In looking at the source for Router.Link, it seems to ultimately be doing the same thing my App is doing (get Router via context and push), so I am trying to understand what is going on. Here is the sandbox:
https://codesandbox.io/s/olnp135zmy
Thanks!
Related
I'm building a component that uses an <iframe> to display another component. This component connects to an NGXS state which needs to reflect changes made to the state. After a lot of failures and testing I discovered the component will always only load the default settings of the state. I created a <button> to toggle a boolean and added an *ngIf to the <iframe> so I can force it to reload manually after trying things like this.Frame.(contentDocument || contentWindow).location.reload(true); didn't make any difference.
I created a stablitz app to demonstrate this issue however I think stackblitz blocks the use of <iframe>s in their platform so you might need to copy it into a local project to tinker with it. It's a simple app that shows the state outside of the <iframe> as well as inside with a button that toggles the <iframe> on and off so you can see how only the default values load after you update the value I have available for demonstration purposes. I'm not getting any type of errors and the issue isn't a matter of something being wrong with the code so I don't know what more to show that isn't in the stackblitz.
Does anybody know why and how <iframe>s do this and if there's a way around it? The only thing I can think to try is make a NestJS app to see if putting the data outside the app and making an API request from the component inside the <iframe> will be allowed, however I don't know why this issue is occurring to in turn know if that too won't be rejected for that same reason. How this can be handled?
The document running in an iframe is isolated from its host. They do not share memory- Angular does not provide a way to synchronize state between a host and an iframe on the page out of the box. The example is actually booting two Angular apps (one inside the frame and one outside). If you are using an iframe for security and isolation purposes, you'll need to devise a way to pass state between the host and the child via postMessage (and be aware that you are running two copies of your application). If this isn't for security/isolation, simply do not use an iframe to contain the child component.
Good Day Everyone, Please I am working on a personal project on Angular, I have two angular applications, the main angular application and the second angular application to redirect to after login and subscription has been validated.
The Only issue now is how to make use of the home.component.html of the second application which contains different menu or navbar items but each time i redirect to the second application, the items or menu showing on the navbar are the main or default application component.html but with the second angular application contents. I also discovered that second application was not generated with any index.html file.
Please I need help on how to go about this. In summary two angular applications one acting as default (thriller page), the second to display the real contents for movies. How can i implement the default application having its own menu and the second application having its own menu as well. Thanks
Use window.location.href = 'SecondAppUrl'; to navigate to the second app.
I am facing a weird problem in windows phone 8.1 page navigation.
I have got two pages.
Login page > Consists of app bar in which one of the button take us to second page.
Second page is Cached using MVVM i.e Registered the Second page to IOC on launch of app and binding the instance of it to page 2 XAML.
In the Second page View model Constructor I am making Server call to get the data.
Problems facing.
On Clicking the app bar button to navigate to second page, the app stays in the first page until the second page make server call and get the response. Then its navigating.
But actual behavior must be it should navigate to second page and wait there to get response showing progress bar.
One quick fix is I made the thread to stop for some 50 millisecond in page 2 constructor of view model and then made service call
It navigated to Second page immediately and waited there until response but the previous page App Bar still displays until I get the response.
I even find the quick solution for it by Collapsing the App bar just before Navigating to that page.
I know these quick fixes are not good. So please help me to find out the problem or if you already know please revert back with the solution.
Don't use constructor to initiate the web service calls . Use OnNavigatedTo or Page_Loaded event .
I am building an HTML5 single-page web app that employs the concept of "views" or "screens"; essentially just different DOM elements rendered to be visible at any given time. As the user navigates between "views", I'm really just hiding/enabling DOM elements.
I'd like to be able to make use of the browser's history functionality, including the back/forward buttons, but I'm not sure how that plays into the concepts of history.pushState and window.onpopstate.
Ideally, I'd like to register "click handlers" with the browser's back/forward history buttons (obviously in a cross-browser-compatible way) so that when the user clicks either button, it engages my own custom Historian object (in JavaScript) that figures out which "view" to render for the user.
How can I do this?
Firstly, you need some sort of routing solution. You can use Crossroads to register and manage your routes. Each route should have a handler, which enables the appropriate div in your single page.
var route1 = crossroads.addRoute('/page1/', function(id){
//enable div for page1 route
});
Then, you can use Hasher to manage browser history.
Another way is to rebuild your application with Durandal, which has a router and manages browser history out of the box.
How to handle History stacks while working with SPA based web applications? I can have my custom stack to track the pages visited, but since I'm just hiding/showing divs , and manipulating the 'history' object requires to push in URLs, I'm unable to understand how to go about handling the situation?
The URL will always remaining something like this : http://mywebapplication/#
I can't push any URLs into the history stack because for all divs being shown, the URL remains the same. Even if I'm somehow able to achieve the same, I don't think overriding the back button of browser should be considered a good practice?
Please suggest how to handle this situation.
In order to track your browsed divs you need some sort of routing solution. You can use Crossroads to register and manage your routes. Each route should have a handler, which enables the appropriate div in your single page.
var route1 = crossroads.addRoute('/page1/', function(id){
//enable div for page1 route
});
Then, you can use Hasher to manage browser history.