To install use: bower install --save lss-inject
---app-main
--my-parent-component <-- PROVIDER of user-manager. user-manager lives in this component.
-user-manager
-component-a
-component-b
-component-c
-component-d
-component-e
-my-child-component <-- needs access to user-manager becomes REQUESTER of user-manager
-user-manager
-component-f
--my-faq
--my-feedback
In this example we have a single instance component that is called user-manager that we would like to use in a child component nested deep in our app. Rather then binding the user-manager through the component tree in our app, we can simple provide and request the user-manager as seen below.
class MyParentComponent extends LssProviderBehavior(Polymer.Element) {
ready() {
super.ready();
this.provideInstance("UserManager", this.$.userManager);
}
}
class MyChildComponent extends LssRequesterBehavior(Polymer.Element) {
connectedCallback() {
super.connectedCallback();
var userManager = this.requestInstance("UserManager");
userManager.ensureLoggedIn().
}
}
class MyComponent extends LssProviderBehavior(LssRequesterBehavior(Polymer.Element)) {
ready() {
super.ready();
this.provideInstance("MyComponent", this);
}
connectedCallback() {
super.connectedCallback();
var userManager = this.requestInstance("UserManager");
userManager.ensureLoggedIn().
}
onLogoutButtonClick(){
var userManager = this.requestInstance("UserManager");
if(userManager)
userManager.logout().
}
}