是否可以升级angularjs属性指令以在angular 4中使用? [英] Is it possible to upgrade angularjs atttribute directives to use in angular 4?
问题描述
我已经能够升级一个angularjs元素指令以在angular 4中使用. 这是示例代码:
I've been able to upgrade an angularjs element directive to be used in angular 4. Here's a sample code:
[myScores.js]
angular.module('app.components.directives.myScores', [])
.directive('myScores', function() {
return {
scope: {
score: '=',
},
template: '<div>>>> Your score is {{score}} <<<',
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元素指令. 我在属性指令上尝试了相同的操作,但是出现了错误.有没有办法升级属性指令?
Notice I'm using UpgradeComponent to upgrade the myScores element directive. I've tried the same on an attribute directive but got an error. Is there a way to upgrade an attribute directive?
这是我升级属性指令的尝试:
Here's my attempt of upgrading an attribute directive:
[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.
推荐答案
Attribute指令可以完全具有Input属性,可以从使用该属性的标记将其传递给它:例如:
A Attribute directive can totally have the Input property which can be passed to it from the tag where it's used : For ex:
<p highlightThis [highlightColor]="'orange'" [count]="5">Highlighted in orange</p>
还要确保您的appModule/SharedModule导入了它.
Also make sure your appModule/SharedModule imports it.
所以我看到的问题是您定义结构的方式 指示.结构指令没有任何模板结构 附加到它.它适用于使用该标签的任何html标签.
So the problem i see is with the way you are defining your structural directive. A structural directive doesn't have any template structure attached to it. It applies to any html tag where it's used.
对于您来说,我看到您正在使用Component class 扩展指令,而 Attribute指令则不可接受:-
For you case, i see you are extending the directive with Component class which is not acceptable to a Attribute directive :--
MakeGreenDirective extends UpgradeComponent {
您应将属性指令与任何组件分开.例如:
You should keep the Attribute Directive separate from any Component. For Ex:
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;
}
}
这篇关于是否可以升级angularjs属性指令以在angular 4中使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!