需求说明:实现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方法的区别是?
前者是点击节点的回调,后者是点击附加的三个点之类的操作