Apex Code Development You need to sign in to do that
Don't have an account?
Etienne Rocheleau 9 How can a Lightning component be aware of the navigation in a Lightning community?
I want to build a component that can ideally live inside the Napili community template header.
This component has to trigger some code whenever there is a navigation occuring in the community.
I have not found how to do this myself,
The system event : aura:locationChange does not seem to do what I want to do,
And I have not found a way to listen on the `force:navigateToURL` and other suck events from the aura/force framework.
If anyone has an idea I would take it :)
As of now I can see this working by listening on the "render" and "rerender" of my component and keeping a check to see if the URL of the page has changed. (There has to be a better way?)
This component has to trigger some code whenever there is a navigation occuring in the community.
I have not found how to do this myself,
The system event : aura:locationChange does not seem to do what I want to do,
And I have not found a way to listen on the `force:navigateToURL` and other suck events from the aura/force framework.
If anyone has an idea I would take it :)
As of now I can see this working by listening on the "render" and "rerender" of my component and keeping a check to see if the URL of the page has changed. (There has to be a better way?)
Note:
This is my armature attempt to capture changes in the URL let me know if this is not your intent for posting the question
Give this a try: I did not experiment too much with many browsers.
I looked around to see if there are any listeners to detect URL change.I stumbled across this post.
- https://stackoverflow.com/questions/1930927/how-can-i-detect-an-address-bar-change-with-javascript
Extending this concept I looked into Locker service API to see if window.addEventListener method was supported by aura and looks like it is from here:Note: Lockerservice supports HashchangeEvent and PopStateEvent, does not support onpopstate,onhashchange methods.
- http://documentation.auraframework.org/lockerApiTest/index.app?aura.mode=DEV
From here I tried to implement the same into a lightning environment to see if the location #change was communicated to the helper component( luckily it did)App:
<aura:application > <c:urlHashChangeEventcomp></c:urlHashChangeEventcomp> </aura:application>Comp:I used a button to append #value to url.you can try by appending # value to the URL through redirect/location.href as I did and see if the addEventListener will pick up the change.
Controller:
({ detecturlchange : function(component, event, helper) { window.location.href += "#mypara"; location.reload(); window.addEventListener("hashchange",helper.handleHashChange(location.hash)); }, })You can also detect the url change using popstate apparently( not tested as mentioned previously with other browsers except chrome v61). If you want to go this route:({ detecturlchange : function(component, event, helper) { window.location.href = '/myparam'; window.addEventListener("popstate",helper.handleHashChange(location.hash)); }, })Helper:({ handleHashChange: function(hashval) { alert( 'I got called by # value change in the url'+hashval) ; } })If you are using popstate update helper method signature accordingly.Hope this helps.
Please mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.
Thanks,
Nagendra