来自另一个模块的组件上的 Angular 指令输入会导致错误

标签 angular angular2-directives angular-directive angular-components angular-module

有以下用例:
-1- 我在模块 1 中有一个指令(拖动指令)
-2- 该指令有多个来自组件的输入 (@Input()) 属性


该指令与模块 1 中的组件完美配合。 问题在于该指令何时应用于模块 2 中的组件。
我完全了解模块的导入导出机制: 模块 2 中的组件已声明并导出。
模块 1 导入模块 2。组件在模块 1 中可用。它已正确渲染。当应用该指令时,一切都会恢复正常。但由于该指令拥有多个 @Input() 属性,因此在应用它们时会发生以下错误:(请原谅我的字体太小了!)

enter image description here

这是组件模板:

enter image description here

正如我所提到的 - 问题是何时应用指令的属性! 您能解释一下这种情况下出了什么问题吗?组件导出为 文档中描述。模块 2 是从模块 1 导入的,但这仍然不够。

最佳答案

如果我理解正确的话,你的模块之间的关系是这样的。

  1. 模块 1 有指令

  2. 模块 2 具有组件

  3. 模块 1 导入模块 2

  4. 您从模块 2 导出组件

enter image description here

实现此目的的方法是将模块 1 导入到模块 2 中。

如果你想将事情分开,一个有效的例子就是这样的。

enter image description here

从组件模块导出的组件将能够使用导入模块中的服务和指令。

我对设计决策的建议是让所有东西都可插入。.向自己提出两个问题,,,将这些模块复制到新项目需要付出多少努力?依赖项是什么?..

关于来自另一个模块的组件上的 Angular 指令输入会导致错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56686706/

相关文章:

angular - 如何使用 ControlValueAccessor Angular 在自定义输入中使用指令

mysql - 如何使用 Angular 将记录动态分配给资源

javascript - indexOf 不是一个函数——Angular 2/Typescript

javascript - 当我在服务器中部署时,Angular Service Worker 离线缓存不起作用

angular - 使用 Angular FormArray 计算值

angular - HTML 检查变量未定义,ngIf 不包括值为 0 的情况

angular - ng2-translate 指令 : why does renderer. setText 不起作用?

angular - Angular 2 中的 ngStyle 和 ngClass

html - Ionic 4 showWhen hideWhen

javascript - 如何正确选择指令中的元素?