I want to update the <title>
tag for the page whenever the location (route) changes. I'm particularly interested in observing App.Router
's current route changing - I then want to access the View associated with that route and update the <title>
tag from the observer based on a property of the View.
For example, if going to /about
currentState
property or equivalent to observe.App.AboutView
associated with the route?I'm using 1.0.0pre4
My goal is to have a title
property and an authorization
property on each View that the Observer on currentPath
will work with. I want to use the title
property to update the document.title
, and the authorization
property object to check wither my current user can access the route.
Now that I say this and with @Michael Grassotti's answer, perhaps these properties belong on the Controller and not the View. The goal is to gain access to these properties associated with the current Route's context to modify the document.title
and check whether or not my App.CurrentUserController
(that stores a User
object model for the logged in user) is authorized to acess the current route.
Steps to detect route change in Angular application Urls. Import Router, Event, NavigationStart, NavigationEnd, NavigationError from '@angular/router'. And inject router in the constructor. Subscribe to the NavigationStart, NavigationEnd, NavigationError events of the router.
Use your router and pass your history object to it. In a component you want to listen to location changes on, import your history object and invoke the listen callback as you did previously. import history from '../myHistory'; ... useEffect(() => { const unlisten = history.
- What do I set the Observer to observe? I'm having trouble finding a currentState property or equivalent to observe.
You can observe the ApplicationController.currentPath
. For example:
App.ApplicationController = Ember.Controller.extend({
currentPathDidChange: function() {
path = this.get('currentPath');
console.log('path changed to: ', path);
window.document.title = path;
}.observes('currentPath')
});
- Within the Observer, how can I access the App.AboutView associated with the route?
Trying to access App.AboutView
from this observer would be tricky and probably not a good idea. I'm not clear on why a view's property would be useful in this scenario. Can you elaborate?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With