angulaire.js - Comment convertir la directive ng1 en ng2?
阿神
阿神 2017-05-15 17:13:47
0
3
796

Récemment, l'équipe du projet a dû transférer le projet de ng1 vers ng2. J'ai lu la documentation ng2 pertinente sur les instructions, mais je suis totalement confus. Je sais que $element correspond à ng2 ElementRef, mais je suis toujours à court de détails. Veuillez me donner quelques conseils !

Directive 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 ??

阿神
阿神

闭关修行中......

répondre à tous(3)
洪涛

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.

我想大声告诉你

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

.
大家讲道理

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal