Question

我的团队正在将我们公司生产的一些AngularJS（v 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，Services，Observables等，以便在我们视图的不同部分之间共享数据，而且在加载太多组件的情况下，这也不会很好。

有没有办法在Angular 5中实现这一目标？我找到了与ElementRef和Renderer / Renderer2核心组件相关的东西，但似乎这些模块并不是出于这种目的。

Angular 5方法用于创建可重用模板，而不是组件

0 个答案: