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

謝邀！
Angular 2 中指令分為以下三種：

• 元件(Component directive)：用於建立UI元件，繼承於 Directive 類別。透過@Component() 裝飾器定義

• 屬性指令(Attribute directive): 用來改變元件的外觀或行為。透過 @Directive()裝飾器定義

• 結構指令(Structural directive): 用於動態新增或移除DOM元素來改變DOM佈局。如ngIf、ngFor。特點是號開頭的指令，是語法糖，表示使用HTML 5模板語法