Query redesign

[rkirov]

This is a proposal for a redesign for the query API. It allows a directive to find other directives that are structurally its 'children'.

• A directive can query the children of the element it is placed on with @ContentChild / @ContentChildren (used to be @query) and its view with @ViewChild / @ViewChildren (used to be @ViewQuery).
• When using @xxxChild the object received will be the desired element (or null if not found), when using @xxxChildren the object will be an ObservableArray.
• Queries will be recalculated when a structural change occurs (ng-if, ng-for), @xxxChild will be set to the new value, while @xxxChildren will notify via the observable API.
• The results will not be injectable, but rather set on declared properties by the framework.

Ex:

@Component(...)
@View(...) 
class ListComponent {
  @ContentChild(ItemDirective)
  itemDirective: ItemDirective;
 }

@Component(...)
@View(...) 
class ListComponent2 {
  @ViewChildren(ItemDirective)
  itemDirectives: ObservableArray<ItemDirective>;
 }

The children directives will be set before the following callbacks are fired (#3863) - afterContentChecked for ContentChild and afterViewChecked for ViewChild.

Both query mechanisms do not go into further into component subviews. ContentChild / ContentChildren support configurable visibility as follows :

• descendants: true - all content descendants are considered
• descendants: false - only direct children of the querying directive are considered (default)
  ViewChildren has no visibility configuration. Queries always skip the element on which the querying directive lives (similar to DOM.querySelector).

Implementation

• implement lifecycle hooks (Adde more LifecycleEvents #3863)
• hook up query update calls to the new hooks
• add integration test for view query with var bindings (add integration tests for ViewQuery with var bindings #3920)
• remove query from forms API (Implement Multibindings #3962)
• using view.elementInjectors internally instead of inj.children tree (closes Increase the number query fields in injectors #3625)
• add ContentChildren and ViewChildren (feat(query): implement ContentChildren and ViewChildren #4237)
• use Rx.Next for ObservableArray
• move declaration to @component field and using setters
• implement ContentChild and ViewChild
• remove self visibility from Query
• optimize static single child
• implement dynamic strategy for queryRefs

// cc @mhevery @vsavkin

[vsavkin]

The only thing that is left is to remove the old API.
#4919

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}