Add some way to mimick the various dependency injections in ng2 (@Parent, @Query, etc)

[timkindberg]

See: https://angular.io/docs/js/latest/api/annotations/DirectiveAnnotation-class.html. There are various dependencies you can inject into the controller class constructor.

1. directive:DirectiveType: a directive on the current element only
2. @Ancestor() directive:DirectiveType: any directive that matches the type between the current element and the Shadow DOM root. Current element is not included in the resolution, therefore even if it could resolve it, it will be ignored.
3. @Parent() directive:DirectiveType: any directive that matches the type on a direct parent element only.
4. @Query(DirectiveType) query:QueryList<DirectiveType>: A live collection of direct child directives.
5. @QueryDescendants(DirectiveType) query:QueryList<DirectiveType>: A live collection of any child directives.

In angular 1:

• 1 is similar to using a require: 'dependency'. So no implementation needed.
• 2 & 3 are similar to `require: '^depencency'. So no implementation needed.
• 4 & 5 don't have a direct correlation in ng1. We'd have to write a custom method that queried child directives and watched for changes so it was live. Also the found children would have to properly reference each child's controller class instance.

Thoughts on 4 & 5: Perhaps an api like this would be possible, where we auto-generate a $Query method on every component class that would help with this:

@Component({ selector: 'child-a' })
class ChildA {
  foo() { console.log('foo') }
}

@Component()
@View({
  inline: `
    <child-a/>
    <child-a/>
  `
})
class MyComponent {
  constructor() {
    let childrenA = this.$Query(ChildA);
    console.log(childrenA.length); // outputs 2
    console.log(childrenA[0].foo()); // outputs 'foo'
  }
}

[hannahhoward]

Hey looking into this -- one challenge is the Component class you define functions internally as the NG1 Directive's controller. And in fact, required controllers in NG1 aren't injected till the link function :(. I'm still looking into how to work around this but it may require going to some internal NG1 private api's.

[timkindberg]

Yeah we actually had some issue using $element in the class because of
that. The child components were not ready yet.

[0x-r4bbit]

Quick note: @Parent is obsolete. Parent dependencies are unbound by default. In other words, if we ask for a dependency in a component it simply looks it up in the dependency injector tree until it finds one. @Host is then used to restrict the lookup to the component's host. Not sure if that's something you want to support for isolated scope directives.

[timkindberg]

@PascalPrecht we are looking into some of these other things over at the new ng-forward project. https://github.com/ngUpgraders/ng-forward

[0x-r4bbit]

So this repo here is deprecated?

[timkindberg]

No. The other one is not ready and definitely takes learnings from all of the existing 'ng2 polyfill' repos, but I could see each living on in its own way. We still use a1atscript at work.

[0x-r4bbit]

alright gotcha.

On Mon, Aug 31, 2015 at 4:29 PM, Tim Kindberg [email protected]
wrote:

No. The other one is not ready and definitely takes learnings from all of
the existing 'ng2 polyfill' repos, but I could see each living on in its
own way. We still use a1atscript at work.

—
Reply to this email directly or view it on GitHub
#22 (comment)
.

/pp