是否可以升级angularjs atttribute指令以在角度4中使用？

Question

我已经能够升级angularjs元件指令在角4. 可以使用这里的一个示例代码：

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

注意我正在使用UpgradeComponent升级myScores元素指令。 我试过同样的属性指令，但出现错误。有没有办法升级一个属性指令？

这里是我的升级属性指令的尝试：

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

我得到一个错误时，加载一个类似这样的页面：

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

我得到这个错误：

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

Answer 1

不同于角< 2，在角度2+，Directives行为添加到一个现有 DOM元素或现有组件实例。我认为你的用例匹配一个组件而不是一个指令。一个角度分量应该被赋予它的模板，或者嵌入template或者通过html templateUrl的路径。即使您已将class MakeGreenDirective注释为@Directive，它也会从Component扩展。您将不得不用@Component注释该课程并提供模板。

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

指this answer，了解有关分歧

更多信息