是否可以升级 angularjs 属性指令以在 Angular 4 中使用?

Posted

技术标签:

【中文标题】是否可以升级 angularjs 属性指令以在 Angular 4 中使用?【英文标题】:Is it possible to upgrade angularjs atttribute directives to use in angular 4? 【发布时间】:2018-02-08 15:44:51 【问题描述】:

我已经能够升级 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 元素指令。 我在属性指令上尝试过同样的方法,但出现错误。有没有办法升级属性指令?

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

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

【问题讨论】:

你搞定了吗? @jamiebarrow 我很久以前就放弃了。 好吧,很遗憾,我想在 Angular 中重写属性很容易,但是是的......如果我还不需要它会很好:) 无论如何谢谢回到我身边 @jamiebarrow 我找到了一种在 Angular 2(现在是 5)中公开 AngularJS 指令的方法。编写一个 Angular JS 组件来使用 Angular JS 指令并在 Angular 2 中升级该组件。这意味着您必须运行 AngularJS 1.5 或更高版本。 @pateketu 截至 2017 年 8 月,我没有找到将属性指令迁移到 Angular 4 的方法。这是不可能的。不确定 Angular 团队是否让这成为可能。不过我不会屏住呼吸。 【参考方案1】:

一个 Attribute 指令可以完全拥有 Input 属性,该属性可以从使用它的标签传递给它:例如:

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

还要确保您的 appModule/SharedModule 导入它。

所以我看到的问题是您定义结构的方式 指示。结构指令没有任何模板结构 附在它上面。它适用于任何使用它的 html 标签。

对于您的情况,我看到您正在使用 Component 类 扩展指令,这对于 Attribute 指令 是不可接受的:--

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;
  

【讨论】:

这没有回答问题。您正在提供一个 Angular 解决方案,其中问题询问如何升级(即,使用 @angular/upgrade/static)AngularJS 指令。 如果您愿意通读这个问题,它会谈到升级到 Angular 4 并在那里使用它。请检查 cmets 的问题

以上是关于是否可以升级 angularjs 属性指令以在 Angular 4 中使用?的主要内容,如果未能解决你的问题,请参考以下文章

编写自定义指令以在 AngularJS (TypeScript) 中向 ng-options 添加工具提示

AngularJS 指令

Angularjs[22] - 内置渲染指令

05AngularJS 指令

材料升级后AngularJS自定义指令双向绑定中断

无法使用 AngularJS 指令更改 $templateCache 中的属性