Передача локальной переменной в директиву как вход

Question

Хочу передать ElementRef backToTopTarget для директивы .back-to-top. Однако я не могу получить его с 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 
    } 
} 

Так что я не могу или что-то, что я делаю неправильно?

Answer 1

check plunker it works

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

Answer 2

Я не уверен, что $(this.el.nativeElement) должен делать.

Это отлично работает для меня:

@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