Updating component display from route - ember.js

Question

To learn more about using services and components, I'm trying to set up a simple flash-message style service. Within my route, I'm saving a record and receiving either a json notice or json error from the server.
Since this is a behavior I'd eventually like to use app-wide, I'm using a simple service (injected into my routes) to handle displaying the message. Within a route, I'm able to call this.get('notification').displayMessage(msg).
Currently the displayMessage function within the service is just alerting the message because I'm stuck on how to create a component that the service can "update". How can a service communicate with a component so that I can send a message and display it from the component template?
profile/index route
user.save().then( (response) => {
//display response.notice in the app-notification component template
}, (response) => {
let errors = JSON.parse(response.errors);
//display response.error in the app-notification component template
this.get('notification').displayMessage(errors[0]);
}
service
import Ember from 'ember';
const { Service } = Ember;
export default Service.extend({
displayMessage(msg) {
alert("message ---> " + msg);
}
});
component
???
component template
<h2 class="alert">{{message}}</h2>
application template
{{app-notification message=message}}

Answer 1

In terms of accessing the service, I like the example that they using the docs: http://guides.emberjs.com/v2.1.0/applications/services/
The ShoppingCart service is injected into components that need to access the Cart.
Once you have access to the ShoppingCart you should be able to:
set a Notification in the service for User from your route error catch.
set up a Computed Property based on the Notification service (some sort of hasNotification method) on the Component hasError that can toggle the error message.
As soon as you set a notification your component will see that the property it is watching has changed and will show/hide your notification.