$rootScop，angular2 中的 $root 值？答案

【问题标题】：$rootScop, $root value in angular2?$rootScop，angular2 中的 $root 值？
【发布时间】：2016-03-28 16:52:48
【问题描述】：

我想在 angular2 中使用 $rootScope 和 $root 值。我也很困惑如何在 angular2 中转换 angularjs 指令，如下所示。

.directive('thisDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function(evt){
                var getMethods = {
                    get_link:function(){
                        var observer = {
                            override:true,
                            triggerIndex:0,
                            onLink:function(link){
                                scope.$root.getThisVal = false;
                                (scope.$$phase || scope.$digest());}
                        };
                        scope.$root.bitlyUrl = "";
                        scope.$root.modelFlags.share_window = scope.$root.modelFlags.steps_upload = scope.$root.getThisVal = true;                          $('.addthisbtn[datatitle=Email]').trigger('click',observer )
                    },
                    addthis_button:function(){
                        var observer = {
                            override:true,
                            triggerIndex:0
                        };
                        $('.addthis-btn[data-title=Email]').trigger('click',observer )
                    }
                };
                getMethods[attrs['thisDirective']]();
            });
        }
    };
})

【问题讨论】：

要将 Angular 1 指令转换为 Angular 2，我发现这篇博文很有帮助：angular-tips.com/blog/2015/09/migrating-directives-to-angular-2

标签： angular angular2-directives

【解决方案1】：

其实Angular 2中已经没有作用域的概念了，现在有两个概念：

指令：“它最简单的指令是装饰器。指令对于封装行为很有用。”
组件：“组件是一个指令，它使用影子 DOM 来创建封装的视觉行为。组件通常用于创建 UI 小部件或将应用程序分解为更小的组件。”

大多数时候要实现一个 Angular1 指令，你需要创建一个组件并在关联的模板中使用它的状态。

您可以查看 angular.io 的官方“5 分钟快速入门”：https://angular.io/guide/quickstart。有很多关于创建组件的提示。

此链接还可以为您提供更多元素：https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md

如果你告诉我们，你的用例是什么，也许我可以给你一个更准确的答案......

希望对你有帮助蒂埃里

【讨论】：

【解决方案2】：

@thierry 解释得很好，但我想补充几点...

--- 众所周知，angular2 中没有 $scope 和 $rootscope 功能，但如果我们想使用一些服务，我们可以在整个应用程序中使用变量来代替这个功能在启动应用程序时提供该变量/服务。通过使用这种方式，服务在应用程序中的任何地方都可用，而无需像这样导入。

bootstrap(App,[ROUTER_PROVIDERS, HTTP_PROVIDERS, GlobalService, provide(LocationStrategy,{useClass:HashLocationStrategy})]);

这里像 ROUTER_PROVIDERS 或我们通过引导程序提供的 Globalservice，我们可以在任何地方使用它。

--- 如果我谈论指令，那么 angular2 中有三种类型的指令解释here。并在https://angular.io/docs/ts/latest/guide/attribute-directives.html 找到详细信息。

【讨论】：

注入GlobalService与注入$rootScope有何不同？通常$rootScope 注入。