javascript - 在动态加载的组件上调用函数

Question

我有一个MainComponent与 <router-outlet>子组件被加载到其中。关于/messages -url messagesComponent已加载。我在 MainComponent 上添加了一个均匀监听器当用户在 <router-outlet> 所在的容器中滚动时触发。如下所示:

@Component({
    selector: "main-component",
    template: `
        <div (scroll)="onContainerScrollEvent($event)">
            <router-outlet></router-outlet>
        </div>
`
})
export class MainComponent {
    private messagePage: number = 0;

    onContainerScrollEvent(event: any) {
        this.messagePage += 1;
    }
}

当 onContainerScrollEvent我想在 messagesComponent 上调用一个函数获取一些新消息。我在messagesComponent上添加了一个EventEmitter它在 onInit 上触发并将自身传递给父事件，但是 <router-outlet>不支持这一点。

更新下面是我的问题的答案，包含艾哈迈德的答案:

消息服务:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MessageService {
    private messagesPageSource = new Subject<number>();
    messagesPage$ = this.messagesPageSource.asObservable();

    public setPage(page: number)
    {
        this.messagesPageSource.next(page);
    }
}

主要组件:

import { Component, OnInit } from '@angular/core';
import { MessageService } from './messages.service';

@Component({
    selector: "main-component",
    template: `
        <div (scroll)="onContainerScrollEvent($event)">
            <router-outlet></router-outlet>
        </div>
`
})
export class MainComponent {
    private pageNumber: number = 1;
    constructor(private messageService: MessageService) {
        messsageService.messagesPage$.subscribe(p => { });
    }

    onContainerScroll(event: any) {
        this.pageNumber += 1;
        this.messageService.setPage(this.pageNumber);
    }
}

消息组件

import { Component, OnInit } from '@angular/core';
import { MessageService } from './messages.service';
import { Subscription } from "rxjs/Subscription";

@Component({
    selector: "messages",
    templateUrl: "messages.view.html"
})
export class messagesComponent implements OnInit {
    private pageNumber: number = 1;
    subscription: Subscription;

    constructor(private messageService: MessageService) {
        this.subscription = messageService.messagesPage$.subscribe(p => {
            this.pageNumber = p;
            this.getMessages();
        });
    }

    ngOnInit() {
        this.getMessages();
    }

    private getMessages() {
        //Call service to retrieve messages
    }
}

Answer 1

使用双向服务，如本 Angular 食谱的父级和子级通过服务进行通信部分中所述:

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

创建一个消息服务，用于在父组件和子组件以及您想要的任何其他组件之间进行通信。

我将跳过提供代码示例，因为上面的 Angular 食谱有一个很好的示例。