Javascript Angular 5创建可重用模板而非组件的方法

我的团队正在将我们公司已经生产的一些AngularJS（v1.6.6）应用程序迁移到AngularJS 5，但我们仍然找不到一种方法来完成我们在AngularJS中能够完成的一件非常好的事情

我们可以在元素中使用指令来传递属性、访问属性、修改属性、修改属性、从字符串构建html、将其附加到元素并将其编译回范围。通过这样做，所有创建的元素将与我的活动控制器共享相同的作用域，并且能够访问它的所有方法和变量

以下代码说明了此类解决方案：

export default ngModule => {

  ngModule.directive('hasPushList', ($compile) => {

    return {
      restrict: 'A',
      link: function (sc, el, at) {
        el.removeAttr('has-push-list')
        var cls = at.hasPushList == 2 ? 'specPushListBox ' : 'pushListBox '
        el.attr('class', cls + at.class)
        var rp = at.maRepeat || 'x',
        tp =
        '<div class="pushedElm bc1i" ng-if="' + at.maDestination + '.length == 0">'+
          '<i class="fa fa-exclamation-circle"></i> Selecione...'+
        '</div>'+
        '<div ng-repeat="' + rp + ' in ' + at.maDestination + '" ng-click="removeFromPushList(' + rp + ')">'+
          '<div class="pushedElm bcp8">'+
            '{{' + at.maOrigin + '[' + at.maOrigin + 'I.indexOf(' + rp + ')].' + (at.maShowKey || 'DS') + '}}'+
          '</div>'+
        '</div>'
        el.attr('ng-mouseenter', 'setPushList({ev: $event, or: ' + at.maOrigin + ', ds: ' + at.maDestination + ', ktp: "' + (at.maPushKey || 'VL') + '", kts: "' + (at.maShowKey || 'DS') + '", md: "' + at.maModel + '", mi: "' + at.maModelId + '", vn: "' + at.maVar + '"})')
        el.attr('ng-mouseleave', 'hidePushList()')
        el.append(tp)
        $compile(el)(sc)
      }
    }

  })

}

export default ngModule=>{
ngModule.directive（'hasPushList'，（$compile）=>{
返回{
限制：“A”，
链接：功能（sc、el、at）{
el.removeAttr（'has-push-list'）
var cls=at.hasPushList==2？'specPushListBox'：'pushListBox'
el.attr（'类别'，cls+at.class）
var rp=at.maRepeat | | x'，
总磷=
''+
“Selecione…”+
''+
''+
''+
“{{{'+at.maOrigin+'['+at.maOrigin+'I.indexOf（'+rp+'）].+（at.maShowKey | | DS'）+'}”+
''+
''
el.attr（'ng-mouseenter'，'setPushList（{ev:$event，或：'+at.maOrigin+'，ds:'+at.maDestination+'，ktp:“+”（at.maPushKey | |'VL'）+”，kts:“+（at.maShowKey | |'ds'）+”，md:“+at.maModel+”，mi:“+at.maModelId+”，vn:“+at.maVar+”）
el.attr（'ng-mouseleave'，'hidePushList（）'）
el.附加（tp）
$1（el）（sc）
}
}
})
}

通过这样做，我们可以使用主控制器中的

setPushList（）

函数，直接操作其作用域，而不必多次创建具有自己作用域的单个指令和

setPushList（）

函数，这大大减少了所使用的内存和处理量

很简单：一个html可定制的模板引擎，只用于减少捆绑包大小

我们试图在Angular 5中创建组件和指令，但我们找不到有效的方法，因为指令不允许我创建模板，组件有自己的作用域，我们需要创建多个@Input、@Output、Services、Observable等，以便在视图的不同部分之间共享数据，而且在加载了太多组件的情况下，这也不能很好地执行

---

在Angular 5中有什么方法可以实现这一点吗？我发现了一些与ElementRef和Renderer/Renderer2核心组件相关的东西，但这些模块似乎并不完全用于这种用途。

您如何确定角度组件的性能不好？为什么要尝试将angularjs中的一些好技巧应用到angularjs中？为什么您认为AOT的性能不如在运行时编译？你应该先试试标准的解决方案。不要试图优化那些没有问题的东西，是的，你看过

ngTemplate

或

ngTemplateOutlet

了吗？它们可能会有所帮助。@smnbbrv我们的团队能够使用组件、事件发射器和父组件订阅在Angular 5系统中重新创建完全相同的功能，但有时会有太多子组件（大约800个）我们的应用程序获得额外的事件侦听器，并从每个子组件的父组件列表选项数组中乘以相同的变量，使其使用的内存几乎是以前的两倍，我们只是创建了一个更大的单个组件，其中包含所有必要的内容，并且没有为每个子组件添加额外的作用域。@DeborahK我将查看这些模块，感谢您的提示！所以你说你尝试了一些东西，但失败了，你没有试图解决问题，而是发明了一些奇怪的东西。请把你试过的贴出来。创建一个包含800个组件的plunkr，以再现问题。然后我们可以看看。