angular.js - Bagaimana untuk menukar arahan ng1 kepada ng2?

Question

Baru-baru ini pasukan projek perlu memindahkan projek dari ng1 ke ng2. Saya membaca dokumentasi ng2 yang berkaitan tentang arahan, tetapi saya benar-benar keliru. Saya tahu bahawa $element sepadan dengan ng2 ElementRef, tetapi saya masih kehilangan maklumat.

Arahan Ng1

.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

Terima kasih atas jemputan!
Arahan dalam Angular 2 dibahagikan kepada tiga jenis berikut:

• Komponen (Arahan Komponen): digunakan untuk membina komponen UI, diwarisi daripada kelas Arahan. Ditakrifkan melalui penghias @Component()

• Arahan atribut: digunakan untuk menukar rupa atau tingkah laku komponen. Ditakrifkan melalui @Directive() penghias

• Arahan struktur: digunakan untuk menambah atau memadam elemen DOM secara dinamik untuk menukar reka letak DOM. Seperti ngJika, ngUntuk. Cirinya ialah arahan bermula dengan ialah gula sintaks, yang bermaksud menggunakan sintaks templat HTML 5 <templat>

.

Selain itu, anda boleh lihat dua bab dalam Angular 2 The Road to Immortality - Table of Contents
:

• Angular 2 vs Angular 1 (Dua artikel berikut memperkenalkan perbezaan antara arahan Ng1 dan Ng2. Versi Cina masih belum diselesaikan, maaf)

  • Ikatan Harta Komponen dengan @Input() dalam Sudut 2

  • Ikatan Peristiwa Komponen dengan @Output() dalam Sudut 2

• Laluan pembelajaran 2 komponen sudut (untuk rujukan sahaja)

  • Ini adalah laluan pembelajaran komponen yang agak lengkap Anda boleh mendapatkan pemahaman umum berdasarkan penerangan artikel. Kandungan utama ialah sifat input, sifat output, pengikatan harta hos dan pengikatan peristiwa.

Answer 2

Saya juga menukar daripada ng1 kepada ng2 Pendekatan kedua-dua rangka kerja adalah berbeza sama sekali. Malah ElementRef yang anda nyatakan tidak memperoleh DOM tetapi sebaliknya menggunakan render

Answer 3

Serah dan tingkatkan item dari 1 kepada 2!