Angular2：如何转换我的树模型以适应不同的界面？

export class Employee {

    jobTitle: string;
    firstName: string;
    lastName: string;

    boss: Employee;
    workers: Employee[];

    constructor(jobTitle: string,firstName: string,lastName: string){
        this.jobTitle = jobTitle;
        this.firstName = firstName;
        this.lastName = lastName;
    }

    public addWorker(worker: Employee){
        this.wokers.push(worker);
        worker.boss = this;
    }

}

假设我们的初始Employees看起来像这样：

function getInitialStaff(): Employee {

    let headWaiter: Employee = new Employee( "Head Waiter","Sarah","Hilton" );
    headWaiter.addWorker(new Employee("Bus Boy","Joe","BeefEater"));
    headWaiter.addWorker(new Employee("Waiter","Randy","Rainman"));

    let headCheif: Employee = new Employee( "Head Cheif","Phil","Yorstomux" );
    headWaiter.addWorker(new Employee("Dishwasher","Andy","Shark"));

    let owner: Employee = new Employee( "Owner","Boris","Laughington" );
    owner.addWorker(headWaiter);
    owner.addWorker(headCheif);
    return owner;
}

我们还可以假设有时员工将被雇用或解雇.有点像这样：

window.setTimeout(()=>{
    let someEmployee: Employee = /* Some existing employee */
    someEmployee.addWorker("someTitle","someName","someLastName");
},someAmountOfTime);

我希望在PrimeNg tree中展示员工.

树窗口小部件要求要显示的数据符合treeNode接口,如下所示：

export interface TreeNode{
    label?: string;
    data?: any;
    icon?: any;
    expandedIcon?: any;
    collapsedIcon?: any;
    children?: TreeNode[];
    leaf?: boolean;
}

主要问题：在不更改Employee类的情况下,将数据转换为TreeNodes的最佳方法是什么？

我正在考虑的事情：

>当我添加一个新员工时,我想保持我的树状态(什么是开放的,选择的是什么等)
>我需要能够轻松检索当前选中的员工.
>我试图避免维护两个重复的模型.
>我想以合理但可扩展的方式利用Angular2的变化检测

这就是我的EmployeeTree组件目前的样子：

@Component({
    selector: 'employee-tree',template: `
        <div>
            <p-tree>
                /* Open Question,I need to transform owner and then tie the resulting TreeNode to the tree */
            </p-tree>
        </div>
    `
    directives: [ Tree ]
})
export class EmployeeTree {
    @Input()
    private owner: Employee;
}

选项1 – 创建一个将Employee转换为TreeNode的管道

我想这会让我的模板看起来像这样：

<p-tree [value]="owner | convertToTreeNode"></p-tree>

我会创建一个管道,做这样的事情：

@Pipe({name: 'convertToTreeNode'})
export class ToTreeNode implements PipeTransform {
    transform(employee: Employee): TreeNode {

        let treeNode: TreeNode = {
            label: employee.firstName + " " + employee.lastName,data: employee,children: []
        };

        employee.workers.forEach(worker => {
            treeNode.children.push(this.transform(worker));
        })

        return treeNode;

    }
}

优点缺点：

>这利用了角度的变化检测
>如果这是一个纯管道,它可能会错过更改
>如果这是一个不纯的管道,它可能太重了
>使组件非常干净,并将责任委托给管道
>添加新项目时,不确定这是否会保留我的gui状态(选择的内容和打开/关闭的内容)

选项2 – 组件内部为树提供单独的结构

@Component({
    selector: 'employee-tree',template: `
        <div>
            <p-tree [data]="employeeTree">
            </p-tree>
        </div>
    `
    directives: [ Tree ]
})
export class EmployeeTree {
    @Input()
    private owner: Employee;

    private employeeTree: TreeNode;

    // TODO - Somehow watch the owner for changes (how?) and then repopulate the employeeTree
}

我认为我可以让Employee发出一个在它发生变化时涓涓细流的事件.这可以给我一些东西.

一般来说,使用Angular2做这样的事情的最佳方法是什么.

总而言之,我想使用一个小部件,它希望数据的格式与我存储的格式略有不同.将数据按入窗口小部件的标准angular2方法是什么？是否有特殊的角度酱可以帮助我？我应该保留两个单独的型号吗？我的树可能有100个或者可能有1000个物品,所以我有点担心性能.