是否可以升級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，瞭解有關分歧

更多信息