You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: modules/angular2/docs/di/di_advanced.md
+40-43Lines changed: 40 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -33,8 +33,8 @@ Often there is a need to create multiple instances of essentially the same injec
33
33
Doing the following would be very inefficient.
34
34
35
35
```
36
-
function createComponetInjector(parent, bindings:Binding[]) {
37
-
return parentresolveAndCreateChild(bindings);
36
+
function createComponetInjector(parent, bindings:Binding[]) {
37
+
return parent.resolveAndCreateChild(bindings);
38
38
}
39
39
```
40
40
@@ -70,80 +70,77 @@ Imagine the following scenario:
70
70
```
71
71
ParentInjector
72
72
/ \
73
-
/ \ host
73
+
/ \ host
74
74
Child1 Child2
75
75
```
76
76
77
-
Here both Child1 and Child2 are children of ParentInjector. Child2 marks this relationship as host. ParentInjector might want to expose two different sets of bindings for its "regular" children and its "host" children. Bindings visible to "regular" children are called PUBLIC, and bindings visible to "host" children are called PRIVATE. This is an advanced use case used by Angular, where components can provide different sets of bindings for their children and their view.
77
+
Here both Child1 and Child2 are children of ParentInjector. Child2 marks this relationship as host. ParentInjector might want to expose two different sets of bindings for its "regular" children and its "host" children. Bindings visible to "regular" children are called "public" and bindings visible to "host" children are called "private". This is an advanced use case used by Angular, where components can provide different sets of bindings for their children and their view.
78
78
79
79
Let's look at this example.
80
80
81
81
```
82
82
class Car {
83
83
constructor(@Host() e: Engine) {}
84
84
}
85
-
var resolvedBindings = Injector.resolve([Car, Engine]);
86
85
87
86
var parentProto = new ProtoInjector([
88
-
new BindingWithVisibility(Engine, PUBLIC),
89
-
new BindingWithVisibility(Car, PUBLIC)
87
+
new BindingWithVisibility(Engine, Visibility.Public),
88
+
new BindingWithVisibility(Car, Visibility.Public)
90
89
]);
91
90
var parent = new Injector(parentProto);
92
91
93
-
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
92
+
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
94
93
var hostChild = new Injector(hostChildProto, parent, true);
95
94
96
-
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
95
+
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
97
96
var regularChild = new Injector(regularChildProto, parent, false);
98
97
99
-
hostChild.get(Car); // will throw because PUBLIC dependencies declared at the host cannot be seen by child injectors
98
+
hostChild.get(Car); // will throw because public dependencies declared at the host cannot be seen by child injectors
100
99
parent.get(Car); // this works
101
100
regularChild.get(Car); // this works
102
101
```
103
102
104
-
Now, let's mark Engine as PRIVATE.
103
+
Now, let's mark `Engine` as private:
105
104
106
105
```
107
106
class Car {
108
107
constructor(@Host() e: Engine) {}
109
108
}
110
109
111
-
var resolvedBindings = Injector.resolve([Car, Engine]);
112
110
var parentProto = new ProtoInjector([
113
-
new BindingWithVisibility(Engine, PRIVATE),
114
-
new BindingWithVisibility(Car, PUBLIC)
111
+
new BindingWithVisibility(Engine, Visibility.Private),
112
+
new BindingWithVisibility(Car, Visibility.Public)
115
113
]);
116
114
var parent = new Injector(parentProto);
117
115
118
-
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
116
+
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
119
117
var hostChild = new Injector(hostChildProto, parent, true);
120
118
121
-
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
119
+
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
122
120
var regularChild = new Injector(regularChildProto, parent, false);
123
121
124
122
hostChild.get(Car); // this works
125
123
parent.get(Car); // this throws
126
124
regularChild.get(Car); // this throws
127
125
```
128
126
129
-
Now, let's mark Engine as both PUBLIC and PRIVATE.
127
+
Now, let's mark `Engine` as both public and private:
130
128
131
129
```
132
130
class Car {
133
131
constructor(@Host() e: Engine) {}
134
132
}
135
133
136
-
var resolvedBindings = Injector.resolve([Car, Engine]);
137
134
var parentProto = new ProtoInjector([
138
-
new BindingWithVisibility(Engine, PUBLIC_AND_PRIVATE),
139
-
new BindingWithVisibility(Car, PUBLIC)
135
+
new BindingWithVisibility(Engine, Visibility.PublicAndPrivate),
136
+
new BindingWithVisibility(Car, Visibility.Public)
140
137
]);
141
138
var parent = new Injector(parentProto);
142
139
143
-
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
140
+
var hostChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
144
141
var hostChild = new Injector(hostChildProto, parent, true);
145
142
146
-
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, PUBLIC)]);
143
+
var regularChildProto = new ProtoInjector([new BindingWithVisibility(Car, Visibility.Public)]);
147
144
var regularChild = new Injector(regularChildProto, parent, false);
148
145
149
146
hostChild.get(Car); // this works
@@ -168,21 +165,21 @@ Let's look at a complex example that shows how the injector tree gets created.
168
165
169
166
```
170
167
<my-component my-directive>
171
-
<needs-service></needs-service>
168
+
<needs-service></needs-service>
172
169
</my-component>
173
170
```
174
171
175
-
Both MyComponent and MyDirective are created on the same element.
172
+
Both `MyComponent` and `MyDirective` are created on the same element.
As you can see the component and its bindings can be seen by its children and its view. The view bindings can be seen only by the view. And the bindings of other directives can be seen only their children.
0 commit comments