从指令向 Angular2 组件发送数据

Question

如何从指令注册到 Angular2 中组件的输入？

具体来说，我已经知道this solution，但我想在没有父包的情况下这样做。

我有这个来自 Angular2 站点的 sn-p 代码，但我无法让它工作以向组件发送数据：

// Directive
import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';

@Directive({ selector: '[dirTest]' })
export class dirTestDirective {
    @Output() refresh = new EventEmitter<number>();
    constructor(private element: ElementRef) {
        setInterval(() => {
            this.refresh.emit( Math.random() );
        }, 1000);
    }
}

// Component
import {
    Input,
    Output,
    Component,
    OnChanges,
    SimpleChanges,
} from '@angular/core';

@Component({
    selector: 'simple',
    template: '<div></div>',
})
export class SimpleComponent implements OnChanges {
    @Input() refresh: number;
    
    // This never gets triggered
    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
    }
}

<!-- Get this together -->
<simple dirTest></simple>

最终我得到了这个还不错的解决方案，但我仍然认为input 更好。

如果有人有更好的解决方案，请发布。

http://plnkr.co/edit/FZsIfLfvtf3EjkGGGBlC

Answer 1

我可以考虑仅从父容器通过“输入”将值传递给组件：

<simple dirTest (refresh)="mySub($event)" [refresh]="name"></simple>

当“mySub”和“name”是父容器的方法和属性时：

  mySub($event){
    this.name = $event; 
 }

看到这个plunk