73 lines
1.6 KiB
Plaintext
73 lines
1.6 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href="/angular2/annotations">angular2/annotations</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/visibility.js#L105">angular2/src/core/annotations/visibility.js (line 105)</a>
|
|
|
|
:markdown
|
|
Specifies that an injector should retrieve a dependency from any ancestor element.
|
|
|
|
An ancestor is any element between the parent element and shadow root.
|
|
|
|
|
|
## Example
|
|
|
|
Here is a simple directive that retrieves a dependency from an ancestor element.
|
|
|
|
```
|
|
@Decorator({
|
|
selector: '[dependency]',
|
|
properties: {
|
|
'id':'dependency'
|
|
}
|
|
})
|
|
class Dependency {
|
|
id:string;
|
|
}
|
|
|
|
|
|
@Decorator({
|
|
selector: '[my-directive]'
|
|
})
|
|
class Dependency {
|
|
constructor(@Ancestor() dependency:Dependency) {
|
|
expect(dependency.id).toEqual(2);
|
|
};
|
|
}
|
|
```
|
|
|
|
We use this with the following HTML template:
|
|
|
|
```
|
|
<div dependency="1">
|
|
<div dependency="2">
|
|
<div>
|
|
<div dependency="3" my-directive></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
|
|
nearest ancestor element:
|
|
- The current element `dependency="3"` is skipped because it is not an ancestor.
|
|
- Next parent has no directives `<div>`
|
|
- Next parent has the `Dependency` directive and so the dependency is satisfied.
|
|
|
|
Angular injects `dependency=2`.
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor()
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|