X Tutup
Skip to content

Commit e9f7a00

Browse files
laco0416Robert Messerle
laco0416
authored and
Robert Messerle
committed
docs(metadata): Add more docs of ViewChild and ViewChildren
Closes angular#7174
1 parent a5d6b6d commit e9f7a00

File tree

2 files changed

+238
-32
lines changed

2 files changed

+238
-32
lines changed

‎modules/angular2/src/core/metadata.ts‎

Lines changed: 120 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1093,51 +1093,155 @@ export var ContentChild: ContentChildFactory = makePropDecorator(ContentChildMet
10931093

10941094
// TODO(alexeagle): remove the duplication of this doc. It is copied from ViewChildrenMetadata.
10951095
/**
1096-
* Configures a view query.
1096+
* Declares a list of child element references.
10971097
*
1098-
* View queries are set before the `ngAfterViewInit` callback is called.
1098+
* Angular automatically updates the list when the DOM was updated.
1099+
*
1100+
* `ViewChildren` takes a argument to select elements.
1101+
*
1102+
* - If the argument is a type, directives or components with the type will be bound.
1103+
*
1104+
* - If the argument is a string, the string behaviors as comma-separated selectors. For each
1105+
* selector, an element matched template variables (e.g. `#child`) will be bound.
1106+
*
1107+
* View children are set before the `ngAfterViewInit` callback is called.
10991108
*
11001109
* ### Example
11011110
*
1111+
* With type selector:
1112+
*
11021113
* ```
11031114
* @Component({
1104-
* selector: 'someDir',
1105-
* templateUrl: 'someTemplate',
1106-
* directives: [ItemDirective]
1115+
* selector: 'child-cmp',
1116+
* template: '<p>child</p>'
11071117
* })
1108-
* class SomeDir {
1109-
* @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
1118+
* class ChildCmp {
1119+
* doSomething() {}
1120+
* }
1121+
*
1122+
* @Component({
1123+
* selector: 'some-cmp',
1124+
* template: `
1125+
* <child-cmp></child-cmp>
1126+
* <child-cmp></child-cmp>
1127+
* <child-cmp></child-cmp>
1128+
* `,
1129+
* directives: [ChildCmp]
1130+
* })
1131+
* class SomeCmp {
1132+
* @ViewChildren(ChildCmp) children:QueryList<ChildCmp>;
11101133
*
11111134
* ngAfterViewInit() {
1112-
* // viewChildren is set
1135+
* // children are set
1136+
* this.children.toArray().forEach((child)=>child.doSomething());
11131137
* }
11141138
* }
11151139
* ```
1140+
*
1141+
* With string selector:
1142+
*
1143+
* ```
1144+
* @Component({
1145+
* selector: 'child-cmp',
1146+
* template: '<p>child</p>'
1147+
* })
1148+
* class ChildCmp {
1149+
* doSomething() {}
1150+
* }
1151+
*
1152+
* @Component({
1153+
* selector: 'some-cmp',
1154+
* template: `
1155+
* <child-cmp #child1></child-cmp>
1156+
* <child-cmp #child2></child-cmp>
1157+
* <child-cmp #child3></child-cmp>
1158+
* `,
1159+
* directives: [ChildCmp]
1160+
* })
1161+
* class SomeCmp {
1162+
* @ViewChildren('child1,child2,child3') children:QueryList<ChildCmp>;
1163+
*
1164+
* ngAfterViewInit() {
1165+
* // children are set
1166+
* this.children.toArray().forEach((child)=>child.doSomething());
1167+
* }
1168+
* }
1169+
* ```
1170+
*
1171+
* See also: [ViewChildrenMetadata]
11161172
*/
11171173
export var ViewChildren: ViewChildrenFactory = makePropDecorator(ViewChildrenMetadata);
11181174

11191175
// TODO(alexeagle): remove the duplication of this doc. It is copied from ViewChildMetadata.
11201176
/**
1121-
* Configures a view query.
1177+
* Declares a reference of child element.
1178+
*
1179+
* `ViewChildren` takes a argument to select elements.
1180+
*
1181+
* - If the argument is a type, a directive or a component with the type will be bound.
11221182
*
1123-
* View queries are set before the `ngAfterViewInit` callback is called.
1183+
* - If the argument is a string, the string behaviors as a selectors. An element matched template
1184+
* variables (e.g. `#child`) will be bound.
1185+
*
1186+
* In either case, `@ViewChild()` assigns the first (looking from above) element if the result is
1187+
* multiple.
1188+
*
1189+
* View child is set before the `ngAfterViewInit` callback is called.
11241190
*
11251191
* ### Example
11261192
*
1193+
* With type selector:
1194+
*
11271195
* ```
11281196
* @Component({
1129-
* selector: 'someDir',
1130-
* templateUrl: 'someTemplate',
1131-
* directives: [ItemDirective]
1197+
* selector: 'child-cmp',
1198+
* template: '<p>child</p>'
11321199
* })
1133-
* class SomeDir {
1134-
* @ViewChild(ItemDirective) viewChild:ItemDirective;
1200+
* class ChildCmp {
1201+
* doSomething() {}
1202+
* }
1203+
*
1204+
* @Component({
1205+
* selector: 'some-cmp',
1206+
* template: '<child-cmp></child-cmp>',
1207+
* directives: [ChildCmp]
1208+
* })
1209+
* class SomeCmp {
1210+
* @ViewChild(ChildCmp) child:ChildCmp;
1211+
*
1212+
* ngAfterViewInit() {
1213+
* // child is set
1214+
* this.child.doSomething();
1215+
* }
1216+
* }
1217+
* ```
1218+
*
1219+
* With string selector:
1220+
*
1221+
* ```
1222+
* @Component({
1223+
* selector: 'child-cmp',
1224+
* template: '<p>child</p>'
1225+
* })
1226+
* class ChildCmp {
1227+
* doSomething() {}
1228+
* }
1229+
*
1230+
* @Component({
1231+
* selector: 'some-cmp',
1232+
* template: '<child-cmp #child></child-cmp>',
1233+
* directives: [ChildCmp]
1234+
* })
1235+
* class SomeCmp {
1236+
* @ViewChild('child') child:ChildCmp;
11351237
*
11361238
* ngAfterViewInit() {
1137-
* // viewChild is set
1239+
* // child is set
1240+
* this.child.doSomething();
11381241
* }
11391242
* }
11401243
* ```
1244+
* See also: [ViewChildMetadata]
11411245
*/
11421246
export var ViewChild: ViewChildFactory = makePropDecorator(ViewChildMetadata);
11431247

‎modules/angular2/src/core/metadata/di.ts‎

Lines changed: 118 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -285,23 +285,77 @@ export class ViewQueryMetadata extends QueryMetadata {
285285
}
286286

287287
/**
288-
* Configures a view query.
288+
* Declares a list of child element references.
289289
*
290-
* View queries are set before the `ngAfterViewInit` callback is called.
290+
* Angular automatically updates the list when the DOM was updated.
291+
*
292+
* `ViewChildren` takes an argument to select elements.
293+
*
294+
* - If the argument is a type, directives or components with the type will be bound.
295+
*
296+
* - If the argument is a string, the string behaviors as comma-separated selectors. For each
297+
* selector, an element matched template variables (e.g. `#child`) will be bound.
298+
*
299+
* View children are set before the `ngAfterViewInit` callback is called.
291300
*
292301
* ### Example
293302
*
303+
* With type selector:
304+
*
294305
* ```
295306
* @Component({
296-
* selector: 'someDir',
297-
* templateUrl: 'someTemplate',
298-
* directives: [ItemDirective]
307+
* selector: 'child-cmp',
308+
* template: '<p>child</p>'
299309
* })
300-
* class SomeDir {
301-
* @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
310+
* class ChildCmp {
311+
* doSomething() {}
312+
* }
313+
*
314+
* @Component({
315+
* selector: 'some-cmp',
316+
* template: `
317+
* <child-cmp></child-cmp>
318+
* <child-cmp></child-cmp>
319+
* <child-cmp></child-cmp>
320+
* `,
321+
* directives: [ChildCmp]
322+
* })
323+
* class SomeCmp {
324+
* @ViewChildren(ChildCmp) children:QueryList<ChildCmp>;
325+
*
326+
* ngAfterViewInit() {
327+
* // children are set
328+
* this.children.toArray().forEach((child)=>child.doSomething());
329+
* }
330+
* }
331+
* ```
332+
*
333+
* With string selector:
334+
*
335+
* ```
336+
* @Component({
337+
* selector: 'child-cmp',
338+
* template: '<p>child</p>'
339+
* })
340+
* class ChildCmp {
341+
* doSomething() {}
342+
* }
343+
*
344+
* @Component({
345+
* selector: 'some-cmp',
346+
* template: `
347+
* <child-cmp #child1></child-cmp>
348+
* <child-cmp #child2></child-cmp>
349+
* <child-cmp #child3></child-cmp>
350+
* `,
351+
* directives: [ChildCmp]
352+
* })
353+
* class SomeCmp {
354+
* @ViewChildren('child1,child2,child3') children:QueryList<ChildCmp>;
302355
*
303356
* ngAfterViewInit() {
304-
* // viewChildren is set
357+
* // children are set
358+
* this.children.toArray().forEach((child)=>child.doSomething());
305359
* }
306360
* }
307361
* ```
@@ -312,23 +366,71 @@ export class ViewChildrenMetadata extends ViewQueryMetadata {
312366
}
313367

314368
/**
315-
* Configures a view query.
316369
*
317-
* View queries are set before the `ngAfterViewInit` callback is called.
370+
* Declares a reference of child element.
371+
*
372+
* `ViewChildren` takes an argument to select elements.
373+
*
374+
* - If the argument is a type, a directive or a component with the type will be bound.
375+
*
376+
* - If the argument is a string, the string behaviors as a selectors. An element matched template
377+
* variables (e.g. `#child`) will be bound.
378+
*
379+
* In either case, `@ViewChild()` assigns the first (looking from above) element if the result is
380+
* multiple.
381+
*
382+
* View child is set before the `ngAfterViewInit` callback is called.
318383
*
319384
* ### Example
320385
*
386+
* With type selector:
387+
*
321388
* ```
322389
* @Component({
323-
* selector: 'someDir',
324-
* templateUrl: 'someTemplate',
325-
* directives: [ItemDirective]
390+
* selector: 'child-cmp',
391+
* template: '<p>child</p>'
326392
* })
327-
* class SomeDir {
328-
* @ViewChild(ItemDirective) viewChild:ItemDirective;
393+
* class ChildCmp {
394+
* doSomething() {}
395+
* }
396+
*
397+
* @Component({
398+
* selector: 'some-cmp',
399+
* template: '<child-cmp></child-cmp>',
400+
* directives: [ChildCmp]
401+
* })
402+
* class SomeCmp {
403+
* @ViewChild(ChildCmp) child:ChildCmp;
404+
*
405+
* ngAfterViewInit() {
406+
* // child is set
407+
* this.child.doSomething();
408+
* }
409+
* }
410+
* ```
411+
*
412+
* With string selector:
413+
*
414+
* ```
415+
* @Component({
416+
* selector: 'child-cmp',
417+
* template: '<p>child</p>'
418+
* })
419+
* class ChildCmp {
420+
* doSomething() {}
421+
* }
422+
*
423+
* @Component({
424+
* selector: 'some-cmp',
425+
* template: '<child-cmp #child></child-cmp>',
426+
* directives: [ChildCmp]
427+
* })
428+
* class SomeCmp {
429+
* @ViewChild('child') child:ChildCmp;
329430
*
330431
* ngAfterViewInit() {
331-
* // viewChild is set
432+
* // child is set
433+
* this.child.doSomething();
332434
* }
333435
* }
334436
* ```

0 commit comments

Comments
 (0)
X Tutup