在对角度 5 中的两个组件进行映射并尝试在子项中填充 menumodel 时出现子项错误

Posted 2023-02-18

【中文标题】在对角度 5 中的两个组件进行映射并尝试在子项中填充 menumodel 时出现子项错误

【英文标题】：Getting error in child while doing mapping of two components in angular 5 and trying to populate menumodel in child

【发布时间】：2018-08-31 11:13:06

【问题描述】：

我在角度方面很新。我正在尝试实现，因为菜单栏是从主页填充的，并且 menumodel 与 home.component.html 绑定，但我有另一个选项卡 applyTab，它在切换时显示树结构的一些值。因此，如果打开了 applytab 并且从节点显示相同的值，我必须填充一个子菜单。我正在尝试在应用选项卡中填充 menumodel 并希望在调用应用选项卡中已经调用的方法时显示值。我在进行映射时遇到了这个错误。

以下是我目前的做法

在应用标签中

import  HomeComponent  from 'app/home/home.component';


@Input() public home: HomeComponent;

this.home.menuModel =  this.items = [
  label: 'Add',
  items: [
    label: 'Tree', 
  ,
     label: 'Show ID', 
    command: (event) => 
     this.toggleNodeDisplay();
  
  
  ]

];

我在映射两个组件时遇到以下错误。

ERROR 错误：未捕获（承诺中）：错误：类型 HomeComponent 是一部分 2 个模块的声明：HomeModule 和 ApplyModule！请 考虑将 HomeComponent 移至导入的更高模块 HomeModule 和 ApplyModule。你也可以创建一个新的 NgModule 导出并包含 HomeComponent 然后将 NgModule 导入 HomeModule 和 ApplyModule。错误：类型 HomeComponent 是 2 个模块的声明：HomeModule 和 ApplyModule！请考虑 将 HomeComponent 移动到导入 HomeModule 的更高模块和 应用模块。你也可以创建一个新的 NgModule 来导出和 包括 HomeComponent 然后在 HomerModule 中导入该 NgModule 和 应用模块。

在 syntaxError (compiler.js:485) 在 CompileMetadataResolver._addTypeToModule (compiler.js:15373) 在 eval (compiler.js:15245) 在 Array.forEach () 在 CompileMetadataResolver.getNgModuleMetadata (compiler.js:15236) 在 JitCompiler._loadModules (compiler.js:34226) 在 JitCompiler._compileModuleAndComponents (compiler.js:34187) 在 JitCompiler.compileModuleAsync (compiler.js:34081) 在 CompilerImpl.compileModuleAsync (platform-b​​rowser-dynamic.js:230) 在评估（core.js:6589） 在 syntaxError (compiler.js:485) 在 CompileMetadataResolver._addTypeToModule (compiler.js:15373) 在 eval (compiler.js:15245) 在 Array.forEach () 在 CompileMetadataResolver.getNgModuleMetadata (compiler.js:15236) 在 JitCompiler._loadModules (compiler.js:34226) 在 JitCompiler._compileModuleAndComponents (compiler.js:34187) 在 JitCompiler.compileModuleAsync (compiler.js:34081) 在 CompilerImpl.compileModuleAsync (platform-b​​rowser-dynamic.js:230) 在评估（core.js:6589） 在 resolvePromise (zone.js:824) 在 resolvePromise (zone.js:795) 在评估（zone.js:873） 在 ZoneDelegate.invokeTask (zone.js:425) 在 Object.onInvokeTask (core.js:4747) 在 ZoneDelegate.invokeTask (zone.js:424) 在 Zone.runTask (zone.js:192) 在 drainMicroTaskQueue (zone.js:602) 在 ZoneTask.invokeTask [作为调用] (zone.js:503) 在调用任务（zone.js:1540） [e-mail]:1427 [e-mail]:1488 下一个@core.js:5503 schedulerFn @ core.js:4342 [e-mail]:239 [e-mail]:186 订阅者._next @订阅者.js:127 订阅者.next@订阅者.js:91 [e-mail]:56 [e-mail]:4322 （匿名）@core.js:4778 [e-mail]:392 [e-mail]:142 NgZone.runOutsideAngular @ core.js:4704 onHandleError @ core.js:4778 ZoneDelegate.handleError @ zone.js:396 Zone.runGuarded @ zone.js:158 [e-mail]:702 api.microtaskDrainDone @ zone.js:711 [e-mail]:610 [e-mail]:503 调用任务@zone.js:1540 [e-mail]:1566

【参考方案1】：

基本上这个错误意味着你的HomeComponent 已经在HomeModule 和ApplyModule 中声明。

一个组件只能在一个模块中声明。

您可以从这两个模块中删除 HomeComponent 的声明，并将其添加到 AppModule 中，然后将这两个模块导入您的 AppModule。

这样，您的错误将得到解决。

【讨论】：

如果我删除然后我得到这个错误。 menuModel 是家的财产。错误类型错误：无法在 checkAndUpdateNodeInline (core.js:13928) 在 checkAndUpdateNode (core.js:13871) 的 checkAndUpdateDirectiveInline (core.js:12401) 的 ApplyComponent.ngOnInit (apply-component.ts:67) 设置未定义的属性 'menuModel' ) 在 debugCheckAndUpdateNode (core.js:14764) 在 debugCheckDirectivesFn (core.js:14705)

你可以创建一个 stackblitz 或 plnkr 以便我查看代码吗？

实际上项目架构是不同的，因此无法复制相同，因为在菜单栏上显示了业务条件我正在尝试使用这种不起作用的方法，因为他们正在通过服务从 json 读取项目和标签.menuService.getMenu('assets/data/home/home-menu.json') .subscribe( res => this.menuModel = res, 但是命令事件( command: (event) =>) 仅在 ts 文件中起作用方法primefaces.org/primeng/#/menumodel你觉得用现有的场景可以实现吗？