降级角度指令并在AngularJS模板中使用

我正在尝试将AngularJS指令转换为AngularJS指令。使用

ngUpgrade

一起运行AngularJS和Angular

我的AngularJS指令如下：

angular.directive('countClicks', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            scope.clickCount = 0;
            elem.on('click', function() {
                // Code
            });
        }
    };
});

转换为角度：

@Directive({
    selector: '[count-click]'
})

export class CountClickDirective implements AfterViewInit {
    constructor(public elem: ElementRef) { }
    clickCount = 0;

    ngAfterViewInit() {
        this.elem.nativeElement.querySelector('count-click', addEventListener('click', function() { 
            console.log('test directive'); 
        }));
    }
}

当单击

将上述迁移的指令降级为AngularJS，以便可以在AngularJS模板中使用

.directive('countClick', <any>downgradeComponent({
    component: CountClickDirective,
}))

---

您可以添加包装器组件，然后降级该组件。请看下面的讨论：

<span countClick ng-click="test()"></span>

test() {
    return 'something';
}