《Angular之ITOO组件树引用爆发的问题》
前言:
千锤万凿出深山,烈火焚烧若等闲。
正文:
一。问题描述
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'treeURL' since it isn't a known property of 'app-tree'.
1. If 'app-tree' is an Angular component and it has 'treeURL' input, then verify that it is part of this module.
2. If 'app-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<br/>
<div class="col-md-2" id="treemenu">
<app-tree [ERROR ->][treeURL]="treeURL" [treeTitle]="'考试信息管理'" (editData)="editNode($event)" ></app-tree>
</div>
见下图:
二。问题定位
组件树引入有误:
- 排查是否按照组件树引入流程文档操作正确
- 验证第一步正确后,排查是否因缓存等问题导致错误依然存在
- 验证第二部后,基本确定是组件树本身的原因:
- 组件封装时,出现问题
- 组件发布时出现问题
- 组件发布后,没有及时修改引入流程文档问题:
在详细定位组件树本身出现哪些问题:
<1>按照报错点,先报错的代码删掉。比如此次先将[treeURL]这个字段删除,发现可以运行,与node库中的源码对比,看是否与封装的字段一致
<2>第一步解决后,出现第二个问题,json数据读取不了,路径正确,对比json数据字段与源码要求的字段是否一致。最终确定问题,解决问题。
此次问题定位在组件树本身的问题,并且是由于封装组件树的人发布新版本,但没有及时修改引入流程文档所致。
三。 解决方案
简而言之,三步到位:
- 修改html中[treeURL]→[institutionId]
- 修改json数据字段:”items”→”TreeModelList”
3.总负责人修改package.json文件,修改ng-itoo-tree版本号,开发人员更新package.json,卸载node库,重新下载依赖包,重新启动项目
结语:
宝剑锋从磨砺出,梅花香自苦寒来。