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 구성 요소를 빌드하는 데 사용됩니다. @Component() 데코레이터를 통해 정의됨

• 속성 지시문: 구성 요소의 모양이나 동작을 변경하는 데 사용됩니다. @Directive() 데코레이터를 통해 정의됨

• 구조적 지시문: DOM 레이아웃을 변경하기 위해 DOM 요소를 동적으로 추가하거나 삭제하는 데 사용됩니다. ngIf, ngFor 등이 있습니다. 로 시작하는 명령이 구문 설탕이라는 것이 특징입니다. 이는 HTML 5 템플릿 구문 <template>

  을 사용한다는 의미입니다.

또한 Angular 2 The Road to Immortality - 목차

:
의 두 장을 살펴볼 수 있습니다.

• Angular 2 vs Angular 1(다음 두 기사에서는 Ng1과 Ng2 지침의 차이점을 소개합니다. 중국어 버전은 아직 정리되지 않았습니다. 죄송합니다.)
  • Angular 2에서 @Input()을 사용한 구성 요소 속성 바인딩

  • Angular 2에서 @Output()을 사용한 구성 요소 이벤트 바인딩

• Angular 2 구성요소 학습 경로(참고용)
  • 이것은 비교적 완전한 구성 요소 학습 경로입니다. 먼저 기사 설명을 기반으로 전반적인 이해를 얻을 수 있습니다. 주요 내용은 입력 속성, 출력 속성, 호스트 속성 바인딩, 이벤트 바인딩입니다.

Answer 2

저도 ng1에서 ng2로 변경했습니다. 두 프레임워크의 접근 방식이 완전히 다릅니다. 말씀하신 ElementRef도 DOM을 가져오지 않고 대신 렌더링을 사용하므로 프로젝트가 아주 작지 않다면 리팩토링을 고려해 보세요.

Answer 3

포기하고 아이템을 1에서 2로 업그레이드하세요!