angular.js - ng1指令怎么转换到ng2 ？

Question

最近项目组需要将项目转到从ng1 转到 ng2。看了相关ng2关于指令的文档，可这是一头雾水，知道将$element 对应ng2 ElementRef,在细节还是不知所措，求指教！

Ng1 Directive

.directive("Touchmove", function () {
    return {
        controller: ["$scope", "$element", function ($scope, $element) {

            $element.bind("touchstart", onTouchStart);
            function onTouchStart(event) {
                event.preventDefault();
                $element.bind("touchmove", onTouchMove);
                $element.bind("touchend", onTouchEnd);
            }
            function onTouchMove(event) {
                var method = $element.attr("ng-touchmove");
                $scope.$event = event;
                $scope.$apply(method);
            }
            function onTouchEnd(event) {
                event.preventDefault();
                $element.unbind("touchmove", onTouchMove);
                $element.unbind("touchend", onTouchEnd);
            }

        }]
    }
});

.directive("Touchend", function () {
    return {
        controller: ["$scope", "$element", function ($scope, $element) {

            $element.bind("touchend", onTouchEnd);
            function onTouchEnd(event) {
                var method = $element.attr("ng-touchend");
                $scope.$event = event;
                $scope.$apply(method);
            }

        }]
    }
})     

HTML

<p touchend="mRelease()" touchmove="mTouch($event)" ng-click="mTouch($event)" >
        <p ng-repeat="c in indexs" style="width:100%;height:{{hIndex}}px;">
            {{c}}
        </p>
</p>

Ng2 ??

Answer 1

Thanks for the invitation!
Instructions in Angular 2 are divided into the following three types:

• Component (Component directive): used to build UI components, inherited from the Directive class. Defined through @Component() decorator

• Attribute directive: used to change the appearance or behavior of a component. Defined via @Directive() decorator

• Structural directive: used to dynamically add or delete DOM elements to change the DOM layout. Such as ngIf, ngFor. The characteristic is the instructions starting with . is syntactic sugar, which means using HTML 5 template syntax <template>

In addition, you can take a look at the two chapters in Angular 2 The Road to Immortality - Table of Contents
:

• Angular 2 vs Angular 1 (The following two articles introduce the differences between Ng1 and Ng2 instructions. The Chinese version has not been sorted out yet, sorry)

  • Component Property Binding with @Input() in Angular 2

  • Component Event Binding with @Output() in Angular 2

• Angular 2 component learning route (for reference only)

  • This is a relatively complete component learning route. You can first get a general understanding based on the article description. The main contents are input properties, output properties, host property binding and event binding.

Answer 2

I also changed from ng1 to ng2. The approaches of the two frameworks are completely different. Even the ElementRef you mentioned does not get the DOM but uses render instead. So if the project is not very small, consider refactoring it

Answer 3

Give up and upgrade item from 1 to 2!