将一个指令指定为另一个指令的参数（插件）

Question

我有一个 "host" 指令，我希望在其中显示 ~~一个 "plugin" 指令~~ 多个可能的 "plugin" 指令之一（例如，plugin1、plugin2、plugin3 等），我希望主机指令的容器指定或更改将作为参数显示的插件指令。

这可以在 angular 中完成，而 "host" 指令不知道它它显示的是哪个指令吗？在某种程度上，它就像 ui-router，我们在其中保留子视图占位符，并动态提供视图。但我希望指令具有这种灵活性。

例如：

<div>
  <host plugin="plugin1 plugin1-param-1 plugin1-param-2"></host>
</div> 
<div>
  <host plugin="plugin2 plugin2-param-1 plugin2-param-2"></host>
</div>

Answer 1

是的。您可以将主机指令注入插件指令。

为了更容易配置，您可以将输入命名为与指令的属性名称完全相同。

@Directive({selector: '[plugin]'})
class Plugin {
  @Input('plugin') config: any
  constructor(@Host() private host: HostCmp) {}
}

您现在可以通过 this.host 访问 HostCmp 实例并且配置将在 this.config

您可以进一步将插件的使用范围缩小到基于选择器的特定主机，方法是使用 host[plugin] 作为选择器。

Answer 2

我来自 Java / .Net 背景，所以我想应用运行时 "plug and play" 模式。我认为嵌入是我上面问题的答案。这是一个有用的 link： http://teropa.info/blog/2015/06/09/transclusion.html

将一个指令指定为另一个指令的参数（插件）

Specify a directive as parameter (plugin) to another directive

angularjs-directive

angular-directive

angular