Czy możliwe jest uaktualnienie dyrektyw angularjs atttribute w kanciastym 4?

Question

byłem w stanie uaktualnić angularjs dyrektywę elementem, który należy stosować w kątowym 4. Oto przykładowy kod:

[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); 
    } 
} 

Wskazówka Używam UpgradeComponent uaktualnić dyrektywę elementu myScores. Próbowałem tego samego na dyrektywie atrybutu, ale dostałem błąd. Czy istnieje sposób na uaktualnienie dyrektywy atrybutów?

Oto moja próba modernizacji dyrektywę atrybut:

[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); 
    } 
} 

pojawia się błąd, gdy ładowanie strony zawierającej coś w rodzaju:

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

mam ten błąd:

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

Answer 1

przeciwieństwie kątowej < 2, w kątowym 2+, Directives dodać zachowanie do istniejącego elementu DOM lub istniejący instancję składnika. Myślę, że twój przypadek użycia pasuje do komponentu, a nie dyrektywy. Składnik kątowy powinien mieć swój szablon albo w linii template lub ścieżkę do html templateUrl. Chociaż masz przypisany komentarz class MakeGreenDirective jako @Directive, jest on rozszerzony z Component. Będziesz musiał dodać adnotację do klasy, podając @Component i podać szablon.

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

patrz this answer uzyskać więcej informacji na temat różnic