Est-il possible de mettre à niveau les directives angularjs atttribute à utiliser dans angulaire 4?

Question

Je suis en mesure de mettre à jour une directive élément AngularJS à utiliser dans angulaire 4. Voici un exemple de code:

[myScores.js]

angular.module('app.components.directives.myScores', []) 
.directive('myScores', function() { 
    return { 
    scope: { 
     score: '=', 
    }, 
    template: '<div>&gt;&gt;&gt; Your score is {{score}} &lt;&lt;&lt;', 
    link: function(scope) { 
     console.log("in myScores", scope) 
    } 
    }; 
}); 

[myScores.ts]

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core'; 
import { UpgradeComponent } from '@angular/upgrade/static'; 

@Directive({ 
    selector: 'my-scores' 
}) 
export class MyScoresDirective extends UpgradeComponent { 
    @Input() score: number; 

    constructor(elementRef: ElementRef, injector: Injector) { 
    super('myScores', elementRef, injector); 
    } 
} 

Avis J'utilise UpgradeComponent pour mettre à niveau la directive élément myScores. J'ai essayé la même chose sur une directive d'attribut mais j'ai reçu une erreur. Existe-t-il un moyen de mettre à niveau une directive d'attribut?

Voilà ma tentative de mise à niveau d'une directive d'attribut:

[makeGreen.js]

angular.module('app.components.directives.makeGreen', []) 
.directive('makeGreen', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element) { 
     console.log("in makeGreen", scope) 
     console.log("element", element) 
     element.css('color', 'green'); 
    } 
    }; 
}); 

[makeGreen.ts]

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core'; 
import { UpgradeComponent } from '@angular/upgrade/static'; 

@Directive({ 
    selector: '[makeGreen]' 
}) 
export class MakeGreenDirective extends UpgradeComponent { 
    @Input() count: number; 
    @Output() clicked: EventEmitter<number>; 

    constructor(elementRef: ElementRef, injector: Injector) { 
    console.log("elementRef", elementRef.nativeElement) 
    super('makeGreen', elementRef, injector); 
    } 
} 

je reçois une erreur lorsque en chargeant une page qui a quelque chose comme:

<div makeGreen>Text should be green</div> 

J'ai eu cette erreur:

Error: Directive 'makeGreen' is not a component, it is missing template. 

Answer 1

Contrairement angulaire < 2, dans 2+ angulaire, Directives ajouter un comportement à un existant élément DOM ou un existant instance de composant. Je pense que votre cas d'utilisation correspond à un composant plutôt qu'à une directive. Un composant angulaire doit être donné son gabarit soit en ligne template ou par le chemin vers le html templateUrl. Même si vous avez annoté le class MakeGreenDirective en tant que @Directive, il est étendu d'un Component. Vous devrez annoter la classe avec @Component et fournir le modèle.

@Component({ 
    selector: '[makeGreen]', 
    templateUrl: './make-green.component.html', 
}) 

se réfèrent à this answer pour plus d'informations sur les différences