Skip to content

Commit a23e250

Browse files
author
Zhicheng WANG
committed
docs: 翻译 tree 部分的剩余文档
1 parent d7aff09 commit a23e250

File tree

5 files changed

+149
-19
lines changed

5 files changed

+149
-19
lines changed

src/material/tree/data-source/flat-data-source.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ import {map, take} from 'rxjs/operators';
1515
* Tree flattener to convert a normal type of node to node with children & level information.
1616
* Transform nested nodes of type `T` to flattened nodes of type `F`.
1717
*
18+
* 树展平器,用于将普通类型的节点转换为具有子级和级别信息的节点。把 `T` 型嵌套节点转换为 `F` 型扁平节点。
19+
*
1820
* For example, the input data of type `T` is nested, and contains its children data:
21+
*
22+
* 例如,类型为 `T` 的输入数据是嵌套的,并包含其子数据:
23+
*
1924
* SomeNode: {
2025
* key: 'Fruits',
2126
* children: [
@@ -27,7 +32,11 @@ import {map, take} from 'rxjs/operators';
2732
* }
2833
* ]
2934
* }
35+
*
3036
* After flattener flatten the tree, the structure will become
37+
*
38+
* 当展平之后,其结构变为:
39+
*
3140
* SomeNode: {
3241
* key: 'Fruits',
3342
* expandable: true,
@@ -43,9 +52,9 @@ import {map, take} from 'rxjs/operators';
4352
* expandable: false,
4453
* level: 2
4554
* }
55+
*
4656
* and the output flattened type is `F` with additional information.
4757
*
48-
* For example, the input data of type `T` is nested, and contains its children data: SomeNode: { key: 'Fruits', children: \[ NodeOne: { key: 'Apple', }, NodeTwo: { key: 'Pear', } ] } After flattener flatten the tree, the structure will become SomeNode: { key: 'Fruits', expandable: true, level: 1 }, NodeOne: { key: 'Apple', expandable: false, level: 2 }, NodeTwo: { key: 'Pear', expandable: false, level: 2 } and the output flattened type is `F` with additional information.
4958
*
5059
*/
5160
export class MatTreeFlattener<T, F, K = F> {
@@ -89,6 +98,9 @@ export class MatTreeFlattener<T, F, K = F> {
8998
* Flatten a list of node type T to flattened version of node F.
9099
* Please note that type T may be nested, and the length of `structuredData` may be different
91100
* from that of returned list `F[]`.
101+
*
102+
* 将节点类型为 T 的列表展平为节点类型为 F 的展平版本。请注意,类型 T 可能是嵌套的,而 `structuredData` 的长度可能与返回列表 `F[]` 的长度不同。
103+
*
92104
*/
93105
flattenNodes(structuredData: T[]): F[] {
94106
let resultNodes: F[] = [];
@@ -99,6 +111,9 @@ export class MatTreeFlattener<T, F, K = F> {
99111
/**
100112
* Expand flattened node with current expansion status.
101113
* The returned list may have different length.
114+
*
115+
* 根据当前展开状态展开已展平的节点。返回的列表长度可能不同。
116+
*
102117
*/
103118
expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F, K>): F[] {
104119
let results: F[] = [];
@@ -127,6 +142,9 @@ export class MatTreeFlattener<T, F, K = F> {
127142
* to `MatTree`.
128143
* The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted
129144
* to type `F` for `MatTree` to consume.
145+
*
146+
* 扁平树的数据源。数据源需要处理树节点的展开/折叠,并将数据提更改为 `MatTree`。`T` 型的嵌套树节点由 `MatTreeFlattener` 展平,并转换为 `F` 型,供 `MatTree` 使用。
147+
*
130148
*/
131149
export class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
132150
_flattenedData = new BehaviorSubject<F[]>([]);

src/material/tree/data-source/nested-data-source.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,22 @@ import {map} from 'rxjs/operators';
1313
/**
1414
* Data source for nested tree.
1515
*
16+
* 嵌套树的数据源。
17+
*
1618
* The data source for nested tree doesn't have to consider node flattener, or the way to expand
1719
* or collapse. The expansion/collapsion will be handled by TreeControl and each non-leaf node.
20+
*
21+
* 嵌套树的数据源不必考虑节点展平器,也不必考虑展开或折叠的方式。展开/折叠将由 TreeControl 和每个非叶节点处理。
22+
*
1823
*/
1924
export class MatTreeNestedDataSource<T> extends DataSource<T> {
2025
_data = new BehaviorSubject<T[]>([]);
2126

2227
/**
2328
* Data for the nested tree
29+
*
30+
* 嵌套树的数据
31+
*
2432
*/
2533
get data() { return this._data.value; }
2634
set data(value: T[]) { this._data.next(value); }

src/material/tree/testing/node-harness.ts

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,19 @@ import {
1414
import {TreeNodeHarnessFilters} from './tree-harness-filters';
1515
import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
1616

17-
/** Harness for interacting with a standard Angular Material tree node. */
17+
/**
18+
* Harness for interacting with a standard Angular Material tree node.
19+
*
20+
* 与标准 Angular Material 树节点进行交互的组件测试工具。
21+
*
22+
*/
1823
export class MatTreeNodeHarness extends ContentContainerComponentHarness<string> {
19-
/** The selector of the host element of a `MatTreeNode` instance. */
24+
/**
25+
* The selector of the host element of a `MatTreeNode` instance.
26+
*
27+
* `MatTreeNode` 实例的宿主元素的选择器。
28+
*
29+
*/
2030
static hostSelector = '.mat-tree-node, .mat-nested-tree-node';
2131

2232
_toggle = this.locatorForOptional('[matTreeNodeToggle]');
@@ -27,6 +37,9 @@ export class MatTreeNodeHarness extends ContentContainerComponentHarness<string>
2737
* 获取一个可用来使用指定属性搜索树节点的 `HarnessPredicate`。
2838
*
2939
* @param options Options for narrowing the search
40+
*
41+
* 缩小搜索范围的选项
42+
*
3043
* @return a `HarnessPredicate` configured with the given options.
3144
*
3245
* 用指定选项配置过的 `HarnessPredicate` 服务。
@@ -35,42 +48,77 @@ export class MatTreeNodeHarness extends ContentContainerComponentHarness<string>
3548
return getNodePredicate(MatTreeNodeHarness, options);
3649
}
3750

38-
/** Whether the tree node is expanded. */
51+
/**
52+
* Whether the tree node is expanded.
53+
*
54+
* 此树节点是否已展开。
55+
*
56+
*/
3957
async isExpanded(): Promise<boolean> {
4058
return coerceBooleanProperty(await (await this.host()).getAttribute('aria-expanded'));
4159
}
4260

43-
/** Whether the tree node is disabled. */
61+
/**
62+
* Whether the tree node is disabled.
63+
*
64+
* 此树节点是否已禁用。
65+
*
66+
*/
4467
async isDisabled(): Promise<boolean> {
4568
return coerceBooleanProperty(await (await this.host()).getProperty('aria-disabled'));
4669
}
4770

48-
/** Gets the level of the tree node. Note that this gets the aria-level and is 1 indexed. */
71+
/**
72+
* Gets the level of the tree node. Note that this gets the aria-level and is 1 indexed.
73+
*
74+
* 获取此树节点的级别。请注意,这将获得 aria-level,并且起始索引为 1。
75+
*
76+
*/
4977
async getLevel(): Promise<number> {
5078
return coerceNumberProperty(await (await this.host()).getAttribute('aria-level'));
5179
}
5280

53-
/** Gets the tree node's text. */
81+
/**
82+
* Gets the tree node's text.
83+
*
84+
* 获取此树节点的文本。
85+
*
86+
*/
5487
async getText(): Promise<string> {
5588
return (await this.host()).text({exclude: '.mat-tree-node, .mat-nested-tree-node, button'});
5689
}
5790

58-
/** Toggles node between expanded/collapsed. Only works when node is not disabled. */
91+
/**
92+
* Toggles node between expanded/collapsed. Only works when node is not disabled.
93+
*
94+
* 在展开/折叠之间切换节点。仅在未禁用节点时起作用。
95+
*
96+
*/
5997
async toggle(): Promise<void> {
6098
const toggle = await this._toggle();
6199
if (toggle) {
62100
return toggle.click();
63101
}
64102
}
65103

66-
/** Expands the node if it is collapsed. Only works when node is not disabled. */
104+
/**
105+
* Expands the node if it is collapsed. Only works when node is not disabled.
106+
*
107+
* 如果节点已折叠,则将其展开。仅在未禁用节点时起作用。
108+
*
109+
*/
67110
async expand(): Promise<void> {
68111
if (!(await this.isExpanded())) {
69112
await this.toggle();
70113
}
71114
}
72115

73-
/** Collapses the node if it is expanded. Only works when node is not disabled. */
116+
/**
117+
* Collapses the node if it is expanded. Only works when node is not disabled.
118+
*
119+
* 如果节点已展开,则使其折叠。仅在未禁用节点时起作用。
120+
*
121+
*/
74122
async collapse(): Promise<void> {
75123
if (await this.isExpanded()) {
76124
await this.toggle();

src/material/tree/testing/tree-harness-filters.ts

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,21 @@
88

99
import {BaseHarnessFilters} from '@angular/cdk/testing';
1010

11-
/** A set of criteria that can be used to filter a list of tree harness instances */
11+
/**
12+
* A set of criteria that can be used to filter a list of tree harness instances
13+
*
14+
* 一组条件,可用于筛选树测试工具实例的列表
15+
*
16+
*/
1217
export interface TreeHarnessFilters extends BaseHarnessFilters {
1318
}
1419

15-
/** A set of criteria that can be used to filter a list of node harness instances. */
20+
/**
21+
* A set of criteria that can be used to filter a list of node harness instances.
22+
*
23+
* 一组条件,可用于筛选节点测试工具实例的列表。
24+
*
25+
*/
1626
export interface TreeNodeHarnessFilters extends BaseHarnessFilters {
1727
/**
1828
* Only find instances whose text matches the given value.
@@ -22,12 +32,27 @@ export interface TreeNodeHarnessFilters extends BaseHarnessFilters {
2232
*/
2333
text?: string | RegExp;
2434

25-
/** Only find instances whose disabled state matches the given value. */
35+
/**
36+
* Only find instances whose disabled state matches the given value.
37+
*
38+
* 仅查找其禁用状态与给定值匹配的实例。
39+
*
40+
*/
2641
disabled?: boolean;
2742

28-
/** Only find instances whose expansion state matches the given value. */
43+
/**
44+
* Only find instances whose expansion state matches the given value.
45+
*
46+
* 仅查找其展开状态与给定值匹配的实例。
47+
*
48+
*/
2949
expanded?: boolean;
3050

31-
/** Only find instances whose level matches the given value. */
51+
/**
52+
* Only find instances whose level matches the given value.
53+
*
54+
* 仅查找其级别与给定值匹配的实例。
55+
*
56+
*/
3257
level?: number;
3358
}

src/material/tree/testing/tree-harness.ts

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@ export type TextTree = {
2222
*
2323
*/
2424
export class MatTreeHarness extends ComponentHarness {
25-
/** The selector for the host element of a `MatTableHarness` instance. */
25+
/**
26+
* The selector for the host element of a `MatTableHarness` instance.
27+
*
28+
* `MatTableHarness` 实例的宿主元素选择器。
29+
*
30+
*/
2631
static hostSelector = '.mat-tree';
2732

2833
/**
@@ -31,6 +36,9 @@ export class MatTreeHarness extends ComponentHarness {
3136
* 获取一个可用来使用指定属性搜索树的 `HarnessPredicate`。
3237
*
3338
* @param options Options for narrowing the search
39+
*
40+
* 缩小搜索范围的选项
41+
*
3442
* @return a `HarnessPredicate` configured with the given options.
3543
*
3644
* 用指定选项配置过的 `HarnessPredicate` 服务。
@@ -39,7 +47,12 @@ export class MatTreeHarness extends ComponentHarness {
3947
return new HarnessPredicate(MatTreeHarness, options);
4048
}
4149

42-
/** Gets all of the nodes in the tree. */
50+
/**
51+
* Gets all of the nodes in the tree.
52+
*
53+
* 获取树中的所有节点。
54+
*
55+
*/
4356
async getNodes(filter: TreeNodeHarnessFilters = {}): Promise<MatTreeNodeHarness[]> {
4457
return this.locatorForAll(MatTreeNodeHarness.with(filter))();
4558
}
@@ -49,6 +62,9 @@ export class MatTreeHarness extends ComponentHarness {
4962
* If a node is under an unexpanded node it will not be included.
5063
* Eg.
5164
* Tree (all nodes expanded):
65+
*
66+
* 获取可见树结构的对象表示形式。如果某个节点位于未展开的节点之下,则不会包含该节点。例如下面这棵树(所有节点都已展开):
67+
*
5268
* `<mat-tree>
5369
* <mat-tree-node>Node 1<mat-tree-node>
5470
* <mat-nested-tree-node>
@@ -66,7 +82,10 @@ export class MatTreeHarness extends ComponentHarness {
6682
* </mat-tree>`
6783
*
6884
* Tree structure:
69-
* {
85+
*
86+
* 树结构:
87+
*
88+
* `{
7089
* children: \[
7190
* {
7291
* text: 'Node 1',
@@ -84,7 +103,7 @@ export class MatTreeHarness extends ComponentHarness {
84103
* ]
85104
* }
86105
* ]
87-
* };
106+
* };`
88107
*/
89108
async getTreeStructure(): Promise<TextTree> {
90109
const nodes = await this.getNodes();
@@ -96,9 +115,21 @@ export class MatTreeHarness extends ComponentHarness {
96115

97116
/**
98117
* Recursively collect the structured text of the tree nodes.
118+
*
119+
* 递归收集树节点的结构化文本。
120+
*
99121
* @param nodes A list of tree nodes
122+
*
123+
* 树节点列表
124+
*
100125
* @param level The level of nodes that are being accounted for during this iteration
126+
*
127+
* 在此迭代期间要考虑的各个节点的级别
128+
*
101129
* @param parentExpanded Whether the parent of the first node in param nodes is expanded
130+
*
131+
* 参数节点中第一个节点的父节点是否已展开
132+
*
102133
*/
103134
private _getTreeStructure(nodes: [number, string, boolean][], level: number,
104135
parentExpanded: boolean): TextTree {

0 commit comments

Comments
 (0)