X Tutup
Skip to content

Query redesign #3922

@rkirov

Description

@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

// cc @mhevery @vsavkin

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    X Tutup