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

我已经能够升级angularjs元素指令，以便在Angular4中使用。 下面是一个示例代码：

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

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

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

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

请注意，我使用UpgradeComponent来升级myScores元素指令。 我在属性指令上尝试了相同的操作，但出现了一个错误。有没有办法升级属性指令

下面是我升级属性指令的尝试：

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

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

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

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

[makeGreen.ts]

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

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

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

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

---

属性指令可以完全具有输入属性，该属性可以从使用它的标记传递给它：例如：

<p highlightThis [highlightColor]="'orange'" [count]="5">Highlighted in orange</p>

您应该将Attribute指令与任何组件分开。例如：

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

  @Directive({
    selector: '[highlightThis]'
   })

 export class HighLightThisDirective {
 @Input() count: number;
 @Input() highlightColor: string;
 @Output() clicked: EventEmitter<number>;

 constructor(private elementRef: ElementRef, injector: Injector) {  }

 ngOnInit(): void {
   this.decorateMyTag();
 }

 private decorateMyTag(): void {
   console.log("highlightColor", this.highlightColor);
   this.elementRef.nativeElement.style.backgroundColor = this.highlightColor;
  }
}

import{Directive，ElementRef，Injector，Input，Output，EventEmitter}from
'角/核'；
@指示({
选择器：“[highlightThis]”
})
导出类highlightthis指令{
@输入（）计数：数字；
@Input（）highlightColor:字符串；
@单击输出（）：EventEmitter；
构造函数（私有elementRef:elementRef，注入器：注入器）{}
ngOnInit（）：void{
this.decorateMyTag（）；
}
私有装饰标记（）：void{
log（“highlightColor”，this.highlightColor）；
this.elementRef.nativeElement.style.backgroundColor=this.highlightColor；
}
}

这个功能正常了吗？@jamiebarrow我很久以前就放弃了。好吧，很遗憾，我想用Angular重新编写属性很容易，但是是的。。。如果我还不需要的话，那就太好了：）不管怎样，谢谢你回来me@jamiebarrow我发现了一种在Angular2（现在是5）中公开AngularJS指令的方法。编写Angular JS组件以使用Angular JS指令，并在Angular 2中升级该组件。这意味着您必须运行AngularJS 1.5或更高版本。@pateketu截至2017年8月，我没有找到将属性指令迁移到Angular 4的方法。这是不可能的。不确定从那以后，Angular团队是否做到了这一点。但我不会屏住呼吸，这并不能回答问题。您提供的是AngularJS解决方案，其中的问题是如何升级（即使用

@Angular/upgrade/static

）AngularJS指令。如果您想通读该问题，它将讨论升级到Angular 4并在那里使用它。请检查对问题的评论