angular2 - 组件指令中的触发事件

Question

我正在尝试使用 EventEmitter 在组件使用的指令中触发事件。

组件：

@Component({
    selector: 'messages',
    templateUrl: 'static/pages/messages/messages.component.html',
    directives: [AutoScroll],
    events: ['update'],
    providers: [
        HTTP_PROVIDERS,
        RoomService,
    ],
    styleUrls: ['../static/css/messages.component.css', '../static/css/app.component.css']
})

export class MessagesComponent {

    public selectedRoom: Room = <Room>{};

    @Output()
    public update: EventEmitter;

    constructor (private _roomService: RoomService) {
        this.update = new EventEmitter();
    }

    public postMessage (msg) {

        this.update.next({});

        this._roomService.postMessage(msg)
            .subscribe(res => {
                this.selectedRoom.messages.push(res);
            });
    }
}

HTML-模板：

<auto-scroll class="chat-messages" (update)="onUpdate($event)">
    <div class="chat-message" *ngFor="#message of selectedRoom.messages">
        <div class="message-content">
            {{ message.text }}
        </div>
    </div>
</auto-scroll>

指令：

@Directive({
    selector: 'auto-scroll',
    template: '<div></div>'
})
export class AutoScroll {

    constructor (private el: ElementRef) {}

    public onUpdate(event) {
        console.log('Updated');
    }
}

基本上我想做的是在每次发布新消息时在自动滚动指令中触发一个事件。我已经让它在两个组件之间工作，但不能在组件和指令之间工作。

我是 Angular 2 的新手，但我希望您能清楚地了解我想要实现的目标！

Answer 1

只需在 EventEmitter 对象之前添加 Output 装饰器，就可以开始了：

@Output() update: EventEmitter<any>;

Answer 2

在您的特定情况下，EventEmitter 没有帮助，因为 AutoScroll 在 MessagesComponent 模板内部使用。

你可以这样实现它：

export class MessagesComponent {

    public selectedRoom: Room = <Room>{};

    @ViewChild(AutoScroll)
    public scroller: AutoScroll;

    constructor (private _roomService: RoomService) {

    }

    public postMessage (msg) {

        this._roomService.postMessage(msg)
            .subscribe(res => {
                this.selectedRoom.messages.push(res);
                this.scroller.onUpdate(msg);
            });
    }
}

angular2 - 组件指令中的触发事件

angular2 - Trigger event in directive from component

typescript

angular2-directives

angular