是否可以升级 angularjs atttribute 指令以用于 angular 4？

Question

我已经能够升级angularjs元素指令以用于angular 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 元素指令。我已经在属性指令上尝试了相同的方法，但得到了一个错误。有没有办法升级属性指令？

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

[绿色.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

一个 Attribute 指令完全可以具有 Input 属性，该属性可以从使用它的标记传递给它：对于 ex：

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

还要确保appModule/SharedModule导入它。

所以我认为问题在于你定义结构指令的方式。结构指令没有附加任何模板结构。它适用于任何使用它的html标签。

对于您的情况，我看到您正在使用组件类扩展指令，这对于属性指令是不可接受的：--

MakeGreenDirective extends UpgradeComponent {

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

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