Question

我有一个MainComponent，其中<router-outlet>加载了子组件。在/messages - url上加载messagesComponent。我已经在MainComponent上添加了一个evenlistener，当用户在<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>并不支持。

更新在我的问题的答案下面加入艾哈迈德的答案：

MessageService：

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

MainComponent：

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

messagesComponent

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

使用此角度食谱的Parent and children communicate via a service部分中描述的双向服务：

{{3}}

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

我将跳过提供代码示例，因为上面的角度菜谱有一个很好的例子。

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

1 个答案: