Мораль этой истории (пожалуйста, исправьте меня, если я ошибаюсь) заключается в том, что в Angular против Angularjs или, по крайней мере, в Материальном дереве, вместо автоматического определения изменений во всем, разработчик должен предоставить события изменений,что значительно уменьшает создание объектов за кулисами, делая Angular быстрее и экономнее.
Итак, решение состоит не в том, чтобы использовать массив для дочерних элементов, а в BehaviorSubject, и добавить метод к классу дляAddChild.
Я вернулся к дереву с вложенными узлами (пример https://material.angular.io/components/tree/examples) (https://stackblitz.com/angular/ngdvblkxajq),), настроил класс FileNode и добавил методы addChild и addChildren
export class FileNode {
kids: FileNode[] = [];
children:BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>(this.kids);
filename: string;
type: any;
addChild(node:FileNode):void {
this.kids.push(node);
this.children.next(this.kids);
}
addchildren(nodes:FileNode[]) {
this.kids = this.kids.concat(this.kids, nodes);
this.children.next(this.kids);
}
}
Затем я изменил строку в buildFileTree, которая настраивала дочерние элементы, чтобы вместо этого вызывать addChildren. node.children = this.buildFileTree(value, level + 1) стал node.addchildren(this.buildFileTree(value, level + 1))
Я также добавил метод, который я мог вызвать из нажатия кнопки, чтобы добавить дочерний элемент вузел изображения для проверки.
addPictureFile():void {
var picNode = this.data.find((node) => node.filename == 'Pictures');
var newNode = new FileNode();
newNode.filename = 'foo';
newNode.type = 'gif';
picNode.addChild(newNode);
}
Теперь Дерево материалов обнаружило мои изменения в дочерних элементах и обновилось само. Рабочий пример https://stackblitz.com/edit/angular-addchildtonestedtree
Завершено, обновлен файл TS:
import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';
/**
* Json node data with nested structure. Each node has a filename and a value or a list of children
*/
export class FileNode {
kids: FileNode[] = [];
children:BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>(this.kids);
filename: string;
type: any;
addChild(node:FileNode):void {
this.kids.push(node);
this.children.next(this.kids);
}
addchildren(nodes:FileNode[]) {
this.kids = this.kids.concat(this.kids, nodes);
this.children.next(this.kids);
}
}
/**
* The Json tree data in string. The data could be parsed into Json object
*/
const TREE_DATA = JSON.stringify({
Applications: {
Calendar: 'app',
Chrome: 'app',
Webstorm: 'app'
},
Documents: {
angular: {
src: {
compiler: 'ts',
core: 'ts'
}
},
material2: {
src: {
button: 'ts',
checkbox: 'ts',
input: 'ts'
}
}
},
Downloads: {
October: 'pdf',
November: 'pdf',
Tutorial: 'html'
},
Pictures: {
'Photo Booth Library': {
Contents: 'dir',
Pictures: 'dir'
},
Sun: 'png',
Woods: 'jpg'
}
});
/**
* File database, it can build a tree structured Json object from string.
* Each node in Json object represents a file or a directory. For a file, it has filename and type.
* For a directory, it has filename and children (a list of files or directories).
* The input will be a json object string, and the output is a list of `FileNode` with nested
* structure.
*/
@Injectable()
export class FileDatabase {
dataChange = new BehaviorSubject<FileNode[]>([]);
get data(): FileNode[] { return this.dataChange.value; }
constructor() {
this.initialize();
}
initialize() {
// Parse the string to json object.
const dataObject = JSON.parse(TREE_DATA);
// Build the tree nodes from Json object. The result is a list of `FileNode` with nested
// file node as children.
const data = this.buildFileTree(dataObject, 0);
// Notify the change.
this.dataChange.next(data);
}
/**
* Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
* The return value is the list of `FileNode`.
*/
buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {
return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
const value = obj[key];
const node = new FileNode();
node.filename = key;
if (value != null) {
if (typeof value === 'object') {
node.addchildren(this.buildFileTree(value, level + 1));
} else {
node.type = value;
}
}
return accumulator.concat(node);
}, []);
}
addPictureFile():void {
var picNode = this.data.find((node) => node.filename == 'Pictures');
var newNode = new FileNode();
newNode.filename = 'foo';
newNode.type = 'gif';
picNode.addChild(newNode);
}
}
/**
* @title Tree with nested nodes
*/
@Component({
selector: 'tree-nested-overview-example',
templateUrl: 'tree-nested-overview-example.html',
styleUrls: ['tree-nested-overview-example.css'],
providers: [FileDatabase]
})
export class TreeNestedOverviewExample {
nestedTreeControl: NestedTreeControl<FileNode>;
nestedDataSource: MatTreeNestedDataSource<FileNode>;
constructor(private database: FileDatabase) {
this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
this.nestedDataSource = new MatTreeNestedDataSource();
database.dataChange.subscribe(data => {
this.nestedDataSource.data = data;
}
);
}
hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
private _getChildren = (node: FileNode) => node.children;
}