Ist es möglich, angularjs attribute-Anweisungen zu aktualisieren, um in eckigen 4 zu verwenden?

Question

Ich habe in der Lage gewesen, eine AngularJS Element Richtlinie aktualisieren in Winkel 4. verwendet werden Hier ist ein Beispielcode:

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

Hinweis I UpgradeComponent bin mit der myScores Elemente Richtlinie zu aktualisieren. Ich habe das gleiche für eine Attribut-Direktive versucht, aber einen Fehler bekommen. Gibt es eine Möglichkeit, eine Attributrichtlinie zu aktualisieren?

Hier ist mein Versuch, ein Attribut Richtlinie der Aktualisierung:

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

Ich erhalte eine Fehlermeldung, wenn eine Seite laden, die ungefähr so ​​aussieht:

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

habe ich diesen Fehler:

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

Answer 1

Im Gegensatz zu Winkel < 2, Winkel 2+, Directives Verhalten hinzufügen zu einem bestehenden DOM-Elemente oder ein bestehende Komponenteninstanz. Ich denke, Ihr Anwendungsfall entspricht eher einer Komponente als einer Direktive. Eine eckige Komponente sollte ihre Vorlage entweder inline template oder durch den Pfad zum html templateUrl gegeben werden. Auch wenn Sie die class MakeGreenDirective als @Directive kommentiert haben, wird sie von einem Component verlängert. Sie müssen die Klasse mit @Component annotieren und die Vorlage bereitstellen.

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

siehe this answer für weitere Informationen über die Unterschiede