Angular 2 - What is equivalent to Root Scope?

Question

All! I\'ve this component where when I click on the href it is supposed to set a variable as Root Scope if it was Angular 1 like this:

selector: \'my-compone         


        

Answer 1

In Angular2, the concept of scope is now equivalent to member variables and @Input properties of a component or directive. When they refer to DOM elements, the bindable properties also include those attributes or properties of the DOM element itself.

In Angular1, you could define a scope variable on $rootScope and refer to it within a deeply nested child scope without explicitly passing it into directives because of the prototypical nature of scope inheritance. In Angular2, there is no scope inheritance. If you want to pass data from the parent component's scope to the immediate child scope, you have to do so explicitly though the directive's @Input bindings. For example, , a model property in the parent component scope is being passed into the child directive's scope through the directive's @Input property called myBinding.

The closest equivalent to $rootScope is @Thierry's answer: using a shared service to retrieve and mutate data, which can be injected into any component through DI. Unlike Angular1, which has a global injector, Angular2 introduces the concept of a hierarchal injector. Each component in the hierarchical chain of components can define it's own injector. In Angular2, the hierarchy of injectors participate in type resolution in a similar way that $scope variables were resolved in Angular1 using $scope inheritance.