Angular UpgradeModule,如何编写一个不可升级的指令包装器

时间:2018-02-02 10:39:48

标签: angularjs angular angularjs-directive

我正在将AngularJS应用程序升级到Angular 5,如果整体上混合设置工作正常,我正在寻找一个解决方案来包装使用编译功能的指令或任何阻止升级的指令(如{ {3}})。 gkalpak说:

,它是anwser https://github.com/angular/angular/issues/15102

3. Create your own (upgradeable) wrapper directive that acts as a proxy between the non-upgradeable AngularJS directive and Angular.

事情是,我无法找到任何关于如何做的事情,更具体地说是如何在我的包装器中使用$injector检索指令。

例如,以下指令:

angular.module('xyz').directive('tooltip', ['some.provider', function (popup) {
    return {
        restrict: 'A',
        compile: function (element, attrs) {
            [...]
        }
    };
}]);

将用作<div tooltip='some text'></div> 无法按照通常的方式导入UpgradeModule:

@Directive({selector: '[tooltip]'})
export class TootlipDirective extends UpgradeComponent {

    @Input('tooltip') text: string;

    constructor(elementRef: ElementRef, injector: Injector) {
        super('tooltip', elementRef, injector);
    }
}

因为Error: Upgraded directive 'tooltip' contains unsupported feature: 'compile'会失败。

任何方向都会非常感激:)

编辑: 好的,所以根据https://github.com/angular/angular/issues/15102#issuecomment-286190833,如果没有模板,就不可能升级一个简单的指令。 尽管如此,我对node_modules/@angular/upgrade/esm5/static.js的一些内省取得了一些进展,它使用injector.get('$injector').get(name + 'Directive')来获取angularjs指令。所以使用这个,我可以注入我的原始指令并在我的angular指令中操作它:

constructor(private el: ElementRef, private renderer: Renderer2,  injector: Injector, @Inject(DOCUMENT) private document) {
    //retrieve angularjs directive 
    this.directives = injector.get('$injector').get('tooltipDirective');
}

ngAfterViewInit(): void {
    this.directives[0].compile(this.el.nativeElement);
}

这可能是我写过的最脏的黑客......无论如何它并没有真正帮助。

0 个答案:

没有答案