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("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);
}
}]
}
})
<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>
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>
.:
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 !