angular 项目中一个需求开发总结

需求说明：实现ui组件的复制功能（本文是自己的思考简写笔记，对于他人参考价值不大）

1.在menu-树状图组件中的operate回调函数中加复制方法 

2.在页面上打开复制组件的前端组件

 copyComponent(menu: Menu): void {
        let drawerRef = this.drawer.open(UIPageCloneComponent);
        drawerRef.inputs.item = Object.assign({}, menu.type_data);
        drawerRef.result.subscribe(data => {
            let parent = this.findMenuByGroupId(data.fun_id);
            let item = new Menu({
                id: this.maxId++,
                name: data.component_name,
                parent_id: menu.parent_id,
                icon: 'icon-case',
                type: 2,
                type_data: data,
                operations: PAGE_OPERATIONS
            });
            parent.addChildren(item);
            this.router.navigate([`pages/ui/page/edit/${data.component_id}`]);
            setTimeout(() => this.current = item, 1000);
        });
    }

将数据传给组件

当点击了组件的提交按钮后

 submit(form: NgForm): void {
        if (form.invalid) {
            return;
        }
        this.UIPageService.clone(this.item.component_id, this.item).subscribe(item => {
            this.item.component_id = item.component_id;
            this.drawerRef.close(this.item);
        });
    }

将返回的组件的id赋值给当前复制的这个组件？这个的作用是啥？

当关闭了这个抽屉弹窗之后会触发drawerRef.result.subscribe这个回调，这个是在哪里订阅的呢？

3.通过当前节点的fun_id去确定父节点

4.去new我们的下拉树图组件

5.将树图组件addChildren到这个父节点中，加一个节点而已

6.当加入完了之后，去打开这个新加的ui组件的代码，实现编辑

7.一秒后去更改当前选中的节点效果

8.实现代码总结

<ng-form class="form-horizontal" #form="ngForm" (ngSubmit)="submit(form)">
        <div class="form-group">
            <label class="col-form-label">用例名称</label>
            <input class="form-control" type="text" [(ngModel)]="item.component_name" name="component_name" required>
        </div>
        <div class="form-group">
            <label class="col-form-label">目录</label>
            <ai-group-select  type="widget" [(ngModel)]="item.fun_id" name="fun_id"></ai-group-select>
        </div>
    </ng-form>

angular是ui组件和请求的数据严格分开的，这里的下拉树图组件，抽屉组件都是写好的，只需要给组件编写type,ngModel,name这三个属性即可了。如果需要重新编写一个目前项目中已经有的组件，说明代码编写方式有问题。

9.树状图组件中的selectItem和operate方法的区别是？

前者是点击节点的回调，后者是点击附加的三个点之类的操作