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

Merci pour l'invitation !
Les instructions dans Angular 2 sont divisées en trois types suivants :

• Component (directive Component) : utilisé pour construire des composants d'interface utilisateur, hérités de la classe Directive. Défini via le décorateur @Component()

• Directive attribut : utilisée pour modifier l'apparence ou le comportement d'un composant. Défini via le décorateur @Directive()

• Directive structurelle : utilisée pour ajouter ou supprimer dynamiquement des éléments du DOM afin de modifier la disposition du DOM. Tels que ngIf, ngFor. La caractéristique est que les instructions commençant par sont du sucre syntaxique, ce qui signifie utiliser la syntaxe du modèle HTML 5 <template>

  .

De plus, vous pouvez jeter un œil aux deux chapitres d'Angular 2 The Road to Immortality - Table of Contents

 :

• Angular 2 vs Angular 1 (Les deux articles suivants présentent les différences entre les instructions Ng1 et Ng2. La version chinoise n'a pas encore été réglée, désolé)
  • Liaison de propriété de composant avec @Input() dans Angular 2

  • Liaison d'événements de composants avec @Output() dans Angular 2

• Parcours d'apprentissage angulaire à 2 composants (pour référence uniquement)
  • Il s'agit d'un parcours d'apprentissage des composants relativement complet. Vous pouvez d'abord obtenir une compréhension générale basée sur la description de l'article. Le contenu principal est les propriétés d'entrée, les propriétés de sortie, la liaison de propriété d'hôte et la liaison d'événement.

Answer 2

J'ai également changé de ng1 à ng2. Les approches des deux frameworks sont complètement différentes. Même le ElementRef que vous avez mentionné n'obtient pas le DOM mais utilise le rendu à la place. Donc si le projet n'est pas très petit, pensez à le refactoriser

.

Answer 3

Abandonnez et améliorez l'article de 1 à 2 !