Angular 2-如何通过属性指令将组件动态注入到属性启用的选择器中，而不是之后

我正在从事一个项目，我们正在创建一种带有可编辑组件小部件的CMS。对于每个可编辑的组件，服务中的标志使编辑按钮显示在可编辑组件的旁边

我创建了一个可以添加到元素选择器的属性指令，使用ViewContainerRef和ComponentFactoryResolver创建编辑按钮组件的实例并将其插入。我遇到的问题是，理想情况下，我希望将注入的组件放置在调用了attribute指令的选择器内部。目前，它将动态注入的组件放在调用attributere指令的元素之后

编辑按钮.directive.ts

import{Directive，ComponentFactoryResolver，ViewContainerRef，ElementRef}来自“@angular/core”；
从“./edit button.component”导入{EditButtonComponent}；
从“../../portal widgets/services/Config.service”导入{Config}；
@指令（{选择器：'[pctEditable]'}）
导出类可编辑指令{
构造函数（专用解析程序：ComponentFactoryResolver，专用位置：
ViewContainerRef，public-config:config，private-element:ElementRef）{
}
恩戈尼尼特（）{
var editMode=this.config.get（'edit-mode'）；//基于编辑模式设置变量
if（editMode==true）{//检查配置服务中的editMode=true
var loc=（this.location）；
var myParentComponent=loc.\u data.componentView.component；
const factory=this.resolver.resolveComponentFactory（EditButtonComponent）；//创建组件
编辑组件工厂
let ref=this.location.createComponent（factory）；//将创建的组件实例插入元素
ref.instance.widget=myParentComponent；
}
}
}

编辑按钮。组件

在可编辑的组件选择器中的用法

我的注射格式是这样的

。。。
...

但我真的更喜欢这个

。。。。。。

为什么您希望指令注入动态组件？当然可以使用不同的方法来实现相同的结果。我认为这个想法是，选择器的“可编辑性”可以在模板级别添加，而无需为每个小部件类型添加导入。可编辑性可以通过使用布尔变量轻松实现，并在

ng模板

之间切换，为什么要复杂化？我们希望组件不包含代码。存在多个构建场景，其中编辑状态不是要包含在构建中的考虑因素。在指令中处理它会使事情复杂化，并且您需要为每个功能编写单独的指令。没有方法可以重用。你怎么打电话来的