在動態加載的組件上調用函數

我有一個MainComponent和<router-outlet>，其中加載了子組件。在/messages上 - 當加載messagesComponent時。當在容器中的用戶滾動其中<router-outlet>駐留這樣我已經添加上打響MainComponent的evenlistener：在動態加載的組件上調用函數

@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>不支持該事件。

UPDATE 下面的回答我的問題納入艾哈邁德的回答是：

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

來源

2017-04-18 Bunnynut

您是否嘗試將'MainComponent'注入'MessagesComponent'，然後將此組件傳遞給'MainComponent'？ – yurzui

用作此角食譜的部分Parent and children communicate via a service描述的雙向服務：

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

創建它，你會用你的父母和孩子之間通信的消息服務組件以及其他任何你想要的組件。

我會跳過提供一個代碼示例，因爲上面的角色烹飪書有一個很好的例子。

來源

2017-04-18 15:04:24

好酷！這是將eventlistener附加到共享變量的一種非常簡單的方法。 – Bunnynut

在動態加載的組件上調用函數

回答

相關問題