typescript - angular2 - Trigga händelse i direktiv från komponent

Jag försöker utlösa en händelse i en direktiv som används av en komponent med hjälp av EventEmitter.

Komponent:

@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-mall:

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

Direktiv:

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

    constructor (private el: ElementRef) {}

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

I princip vill jag utlösa ett evenemang i auto-scroll-direktivet varje gång ett nytt meddelande publiceras. Jag har fått detta att fungera mellan två komponenter, men inte mellan en komponent och ett direktiv.

Jag är ganska ny på Angular 2, men jag hoppas att du får en klar bild av vad jag vill uppnå!

Svar #1

Lägg bara till Output-dekoratören framför ditt EventEmitter-objekt så borde du vara redo att köra:

@Output() update: EventEmitter<any>;

Svar #2

I ditt specifika fall hjälper inte EventEmitter eftersom AutoScroll används inne i MessagesComponent-mallen.

Du skulle kunna implementera det så här:

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

Relaterade artiklar