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

Posted 2023-02-22

【中文标题】来自另一个模块的组件上的 Angular 指令输入会导致错误

【英文标题】：Angular directive inputs over component from another module cause an error

【发布时间】：2019-11-03 07:36:48

【问题描述】：

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

---

该指令与模块 1 中的组件完美配合。 问题在于指令何时应用于模块 2 中的组件。

---

我完全了解有关模块的导入导出机制： 模块 2 中的组件被声明并导出。

---

模块 1 导入模块 2。组件在模块 1 中可用。它被正确渲染。应用指令后 - 一切都恢复正常。但是由于该指令在应用时具有多个 @Input() 属性，因此会发生以下错误：（请原谅我的小字体！）

这是组件模板：

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

【问题讨论】：

它是否也抱怨绑定“appDraggable”？你能发布你的指令代码吗？

模块 2 是否导入 1？

@itdoesntwork - 不，导入方向相反 - 模块 1 导入模块 2

@Freddy - 这是指令的代码jsfiddle.net/virto/kf6azn4e/1。我没有应用一个工作示例，因为这个问题可能很简单。而且正如我上面提到的 - 当指令在不属于输入属性的情况下应用时没有任何抱怨。

既然指令在模块 1 中并且在模块 2 中存在的组件中使用，那么 2 不应该导入 1 吗？

【参考方案1】：

如果我理解正确，您的模块之间的关系是这样的。

模块 1 有指令

模块 2 具有组件

模块 1 导入模块 2

您从模块 2 导出组件

完成这项工作的方法是将模块 1 导入模块 2。

如果你想把事情分开，一个可行的例子就是这样。

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

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

【讨论】：

@tdoesntwork - 谢谢！我必须测试它。但是这种行为的逻辑在哪里，因为角度模块充当“盒子”并导出组件以供其他组件使用。在我们的项目中，我们将服务、管道和指令分开。为此，我们还使用了共享模块，但该指令被放置在另一个模块中。如果是真的，可能目的是将所有指令放在共享模块中，然后从那里导入“消费者”模块。无论如何，对我来说这是一种奇怪的行为！