Übergeben Sie die lokale Variable an die Direktive als Eingabe

Question

Ich möchte ElementRef backToTopTarget an die Direktive .back-to-top übergeben. Allerdings kann ich es nicht mit 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 
    } 
} 

bekommen So kann ich nicht oder etwas, das ich es falsch mache?

Answer 1

check plunker it works

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

Answer 2

Ich bin mir nicht sicher, was $(this.el.nativeElement) tun soll.

Dies funktioniert gut für mich:

@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