將局部變量傳遞給指令作為輸入

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

檢查插塞工作

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 {
}

柱塞示例