javascript - Angular 5 创建可重用模板（而非组件）的方法

我的团队正在将我们公司现有的一些 AngularJS（版本 1.6.6）应用程序迁移到 Angular 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)
      }
    }

  })

}

通过这样做，我们可以直接使用主控制器的 setPushList() 函数，直接操作其作用域，而无需多次创建带有自身作用域和 setPushList() 函数的单个指令，这大大减少了使用的内存和处理量。

就这么简单：一个 HTML 可自定义的模板引擎，仅用于减少包大小。

我们尝试通过创建组件和指令在 Angular 5 中实现它，但我们找不到有效的方法，因为指令不允许我创建模板，而组件有自己的作用域，这需要我们创建多个 @Inputs、@Outputs、服务、可观察对象等来在视图的不同部分之间共享数据，而且在加载过多组件的情况下，这样的性能也不好。

在 Angular 5 中有办法实现这个吗？我发现了一些与 ElementRef 和 Renderer/Renderer2 核心组件相关的内容，但似乎这些模块并不是专门用于这种目的的。