在Angular2中动态添加工具提示

时间:2017-03-16 20:07:59

标签: angular typescript angular2-template angular2-directives

我正在尝试使用Typescript在Angular2中实现以下功能:
我想要一个代表工具提示的指令/组件。我知道怎么做,所以没有问题。我希望能够将工具提示添加到我页面上的任何HTML元素。这也不是一个大问题。我可以使用像this one这样的类似方法。

但现在我有以下情况:
我已经有动态加载的组件(即带按钮的表单,输入字段等)。但现在说我希望其中一个组件有工具提示。我可以在他们的所有HTML模板中添加工具提示指令或组件,但这对我来说似乎不是一个非常干净的解决方案。即如果我想象我可能有多个较小的指令/组件可以添加到另一个组件。然后我需要将所有这些指令/组件添加到我可能在某些时候使用它们的所有组件上,这看起来很混乱。
我可以配置这些表单组件,也可以扩展配置,因此最好是为每个组件配置一个可选的工具提示配置,如果已设置,则动态添加工具提示。

但是我不知道如何在不将所有这些组件打包到其他组件中的情况下实现这一点,这些组件可以动态创建工具提示,就像我上面链接的方法一样。

所以我的问题是:如何实现这一目标?

1 个答案:

答案 0 :(得分:-1)

你的指令选择器应该像'cool-button:not(a)'。如果是这样,具有“冷却按钮”类的组件将自动开始工作。准备好指令后,请在根组件或根模块上注册。使用此指令名称作为

的属性