iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: clarify querying all descendants (#15400) 

Fixes #14417
Updated example to illustrate @ContentChildren default behavior (only query direct children), and how to query for nested elements/all descendants.
This commit is contained in:
Mike 2017-03-24 21:36:55 +00:00 committed by Victor Berchet
parent b8d5f87f96
commit ea848f74af
2 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/examples/core/di/ts/contentChildren/content_children_example.ts
View File

@ -17,13 +17,20 @@ export class Pane {
@Component({
selector: 'tab',
template: `
<div>panes: {{serializedPanes}}</div>
<div class="top-level">Top level panes: {{serializedPanes}}</div>
<div class="nested">Arbitrary nested panes: {{serializedNestedPanes}}</div>
`
})
export class Tab {
@ContentChildren(Pane) panes: QueryList<Pane>;
@ContentChildren(Pane) topLevelPanes: QueryList<Pane>;
@ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes: QueryList<Pane>;
get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; }
get serializedPanes(): string {
return this.topLevelPanes ? this.topLevelPanes.map(p => p.id).join(', ') : '';
}
get serializedNestedPanes(): string {
return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map(p => p.id).join(', ') : '';
}
}
@Component({
@ -32,7 +39,12 @@ export class Tab {
<tab>
<pane id="1"></pane>
<pane id="2"></pane>
<pane id="3" *ngIf="shouldShow"></pane>
<pane id="3" *ngIf="shouldShow">
<tab>
<pane id="3_1"></pane>
<pane id="3_2"></pane>
</tab>
</pane>
</tab>
<button (click)="show()">Show 3</button>

18
packages/examples/core/di/ts/contentChildren/e2e_test/content_children_spec.ts
View File

@ -12,19 +12,29 @@ import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
describe('contentChildren example', () => {
afterEach(verifyNoBrowserErrors);
let button: ElementFinder;
let result: ElementFinder;
let resultTopLevel: ElementFinder;
let resultNested: ElementFinder;
beforeEach(() => {
browser.get('/core/di/ts/contentChildren/index.html');
button = element(by.css('button'));
result = element(by.css('div'));
resultTopLevel = element(by.css('.top-level'));
resultNested = element(by.css('.nested'));
});
it('should query content children', () => {
expect(result.getText()).toEqual('panes: 1, 2');
expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2');
button.click();
expect(result.getText()).toEqual('panes: 1, 2, 3');
expect(resultTopLevel.getText()).toEqual('Top level panes: 1, 2, 3');
});
it('should query nested content children', () => {
expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2');
button.click();
expect(resultNested.getText()).toEqual('Arbitrary nested panes: 1, 2, 3, 3_1, 3_2');
});
});