angular 如何使用查询列表对象？

Question

I am learning angular and came across view children and content children. These are querlist objects in angular. During lifecycle hook, angular updates querlist. and query list object stores view nodes. This all is theoretical.I want to ask what is mean by update the query list or making a query? What is a query in the query list?

Answer 1

The query is the directive that you pass into the ViewChildren decorator.

A directive in Angular is something that adds some extra behavior to the HTML elements or they modify the DOM. A Component is also a directive which has a view/template associated with them.

eg

@ViewChildren(ChildDirective) viewChildren !: QueryList<ChildDirective>;

So essentially it will list all the directives that match 'ChildDirective' currently present in the DOM. It searches for the provided directive/component in the DOM, hence it is referred to as Query. Children - a plural which suggests you expect more than one matching the criteria and hence you need a list to hold them.

Angular has provided inbuilt Interfaces/Types to deal with it, QueryList. Any time a child component/directive is added, removed, or moved, the query list will be updated

Here is an excellent article that will give a more clear idea. https://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/