CODEWITHSUNDEEP
angular
marlboroman
marlboroman

Reputation: 71

Angular 2 abstract directive needs decorator

I want to implement an Angular 2 Directive hierachy. A base, abstract class sets up handlers for mouse events and hands off processing the cursor position to a concrete derived class that does specific processing upon the model. I have an abstract class

    export abstract class DragDirective implements AfterViewInit, OnDestroy {
        constructor(protected elementRef: ElementRef) { }
        @Input() dragTarget: Draggable;
        ngAfterViewInit() {
            // various rxjs Observables and subscription handlers for mouseevents, including ...
            ...  this.handlePoint(point);
            ...
        }
        abstract handlePoint(point: Point): void;
    }

And a concrete directive:

    @Directive({
        selector: '[drag-anywhere]'
    })
    export class DragAnywhereDirective extends DragDirective {
        handlePoint(point: Point): void {
            this.dragTarget.setPosition(point);
        }
    }

At runtime I get the error: Can't resolve all parameters for DragAnywhereDirective: (?). unless I also decorate the abstract class with:

    @Directive({
        selector: '[unusable-because-its-not-concrete]'
    })

Why is it necessary to decorate the abstract class?

Upvotes: 1

Views: 1237

Answers (1)

than
than

Reputation: 887

You need to pass the elementRef to the constructor in your base class like so

@Directive({
   selector: '[drag-anywhere]'
})
export class DragAnywhereDirective extends DragDirective {
   constructor(protected elementRef: ElementRef) {
       super(elementRef);
   }

   handlePoint(point: any): void {
       this.dragTarget.setPosition(point);
   }
}

For more details on decorators check out this blog post by Todd Motto

Upvotes: 2

Related Questions