Question

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

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

我有来自Angular2网站的代码段代码，但我无法让它工作以将数据发送到组件：

＆＃13;

// 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);
    }
}

＆＃13;

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

＆＃13;

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

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

http://plnkr.co/edit/FZsIfLfvtf3EjkGGGBlC

Answer 1

我可以考虑通过＆＃34;输入＆＃34;将值传递给组件。仅来自父容器：

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

当＆＃34; mySub＆＃34;和＆＃34;名称＆＃34;是父容器的方法和属性：

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

请参阅此plunk

从指令发送数据到Angular2组件

1 个答案: