状态模式

时间：2023-03-27 23:46:44 HTML

在新建工程中，需要改变编辑添加的方式。之前，列表组件和编辑添加组件一直放在同一个位置，这是兄弟组件的关系。这样虽然可以解决问题，但是每次跳回列表页都会重新查询，这意味着我们可能看不到我们编辑的item，不直观。因此，在新项目中，编辑和添加组件应该作为子组件来使用，这样更直观。状态模式：状态模式是一种行为设计模式，允许您在对象的内部状态发生变化时改变对象的行为，使其看起来像是改变了自己的类。类比现实：手机的电源键会根据不同的状态完成不同的动作。当手机解锁时，按下按钮将关闭屏幕。手机关机状态下，按下按键会提示需要解锁。当手机电量不足时，按下按键会提示需要充电。先说一下什么是标准状态模式：过程很简单，就是声明一个状态类并实现，然后在用户使用的类中调用，根据不同的状态执行不同的方法。对于修改编辑组件和列表组件关系的问题，发现可以在原项目中修改，然后实时反馈给父组件，不需要改变查询条件。修改前：修改后：如果不想使用这种形式的弹框，可以做如下修改：将弹框改为div形式，showBatchEdit为false时显示索引界面，以及showedit为true时只显示编辑界面。//索引...

//编辑

但是这个如果我们这样做，就会出现一个新的问题。弹窗形式虽然没有问题，但是改成这种样式后，如果我们编辑第二页，提交后会跳转到第一页。在断点处测试，发现如果使用ngif实现，返回主页面时会再次执行onPageChange，猜测是库中函数的原因。再次调用时，会直接弹出到索引组件page=0,然后像下面这样，Index接收snapfingergraphTDA[indexcomponentreceivessnapvaluepage=0]-->B(onPageChange)B-->C(reload)C-->D（将参数转换成路由参数，改变路由）D-->E（触发订阅路由）E-->F（再次进行分页查询，返回第一页结果）ngOnInit():void{console.log('ngoninit');...this.route.queryParams.subscribe((params:{page?:string,size?:string})=>{this.vehicleBrandService.page(...)...}}onPageChange(page:number):void{console.log('page');this.reload({...this.params,...{page}});}reload(params:Params):void{console.log(params);//转换parameterstorouteparametersconstqueryParams=CommonService.convertToRouteParams(params);this.router.navigate(['./'],{relativeTo:this.route,queryParams:queryParams,}).then();}所以为了进一步确认思路是否正确，我在onSizeChange()处打断点，发现edit返回索引页后并没有执行，而是执行了onPageChange，再次确认应该和库中的函数设置有关（比如ngOninit方法设置为弹出page=0进行初始化），于是又查了一下ngif的原理。当NgIf为false时，Angular从DOM中物理移除元素子树。它会破坏子树中的组件及其状态，可能会释放大量资源并最终为用户带来更好的性能。但是我们现在想要的效果需要在不清除DOM的情况下实现，所以我们再次查找，找到了[hidden]属性。当它的值为真时，对象被隐藏，但不被清除。[hidden]="showBatchEdit"问题二：引入lodash遇到的问题根据官方文档，只需要如上导入lodash库到本地即可。var_=require('lodash');constarr=[1,2,3,4,5,6,7,8,9];_.chunk(arr,2)然后像上面那样使用，但是这样使用之后会报错ngs：即require不能正常使用，会询问我们是否需要安装自定义类型的节点。安装@types/node后在tsconfig中配置。//tsconfig.jsoncompilerOptions:{"types":["node"]}运行后发现在ngs下会报错，估计是进行了非法操作，然后尝试做同样在tsconfig.app.json配置的时候再次执行，发现没有报错，功能可以正常执行。然后再去查看两者的区别，发现tsconfig.app.json是继承自tsconfig.json，也就是说这应该和tsconfig.app.json中新增的配置项有关。//tsconfig.app.json{"extends":"./tsconfig.json","compilerOptions":{"outDir":"./out-tsc/app",},"files":["src/main.ts","src/polyfills.ts"],"include":["src/**/*.d.ts"]}又能找到一个include项，猜想可能跟它有关，试试再次将这个配置项添加到tsconfig.json中，再次尝试发现错误消失了。我也在网上搜索了两者的一些区别。tsconfig.app.json是Angular应用的配置。tsconfig.json用于IDE集成。lodash中文官方文件等对象