将局部变量传递给指令作为输入

Question

I want to pass ElementRef backToTopTarget to directive .back-to-top . However I cannot get it with ngOnChanges

<section #backToTopTarget>
    <section class="back-to-top" [target]="backToTopTarget">
        Back to top <i class="fa fa-angle-up"></i>
    </section>
</section>

---

/// <reference path="../../../typings/angular2.d.ts" />

import {Directive, Input, OnChanges, ElementRef} from 'angular2/core';
import {BaseComponent} from "../../BaseComponent/BaseComponent";

@Directive({
    selector: '.back-to-top',
})
export class BackToTop implements OnChanges {
    private $el;
    @Input('target') private target;
    private $target;

    constructor(private el: ElementRef) {
        this.$el = $(this.el.nativeElement);
    }

    ngOnChanges({target}) {
        // target.currentValue === undefined
    }
}

So I cannot or anything I am doing it wrong?

Answer 1

check plunker it works

ngOnChanges(...args:any[])
{
    console.log(args[0].target); // according to my plunker code
}

Answer 2

I'm not sure what $(this.el.nativeElement) is supposed to do.

This works fine for me:

@Directive({
    selector: '.back-to-top',
})
export class BackToTop implements OnChanges {
    private $el;
    @Input() private target;
    private $target;

    constructor(private el: ElementRef) {
        this.$el = this.el.nativeElement;
    }

    ngOnChanges(changes) {
        console.debug(this.target);
        // outputs `<section></section>`
    }
}

@Component({
  selector: 'my-app',
  directives: [BackToTop],
  template:`
<section #backToTopTarget>
    <section class="back-to-top" [target]="backToTopTarget">
        Back to top <i class="fa fa-angle-up"></i>
    </section>
</section>
  `,
})
export class App {
}

Plunker example