Question

我有多个函数都有不同的签名：

getBooks(author, id);
getMusic(year, genre);
getProduct(name, id);

所有返回相同类型的数据：pagedData。此pagedData包含数据本身，nextUrl用于获取下一页：

{
   data: [
     ...
   ]
   nextUrl: "http://api.com?page2"
}

在Angular2中，我创建了一个我想重用的pagedData组件。对于书籍，音乐和产品，页面看起来是一样的。唯一的区别是for循环中的html迭代了所有项目。

该组件的代码如下所示：

export class PagedData implements OnInit {

    @Output() loadMore = new EventEmitter();

    nextPage = null;

    pageData: IPagedData;

    constructor() {
        this.loadMore.subscribe(res => {
            console.log('res', res);
        });
    }

    ngOnInit() {
        this.loadMore.emit();
    }

}

Book特定代码如：

@Component({
    template: `
        <paged-data (loadMore)="update($event)"></paged-data>
    `
})

export class BooksPage {

    constructor(
        public bookService: BookService) {
    }

    update(event) {
        return this.BookService.getBooks('jack', 29349);
    }

}

我的问题是，即使我订阅了loadMore并发出了该事件，console.log('res', res);仍会显示res, undefined。

有谁看到出了什么问题？在过去，我会做一个回调而不是一个发射器，只是让每个页面给组件另一个回调。然后组件可以调用该函数来获取数据。也许我想用错误的方法用事件发射器创建这样的行为。

Answer 1

this.loadMore.emit();

不会发出值。如果你使用

this.loadMore.emit('foo');

你会得到不同的输出

Answer 2

输出变量用于发射而不使用它们的可观察量

@Output() loadMore = new EventEmitter<string>();

this.loadMore.emit(..);

它还应该有<T>

类型

订阅Angular2 eventEmitter没有收到值

2 个答案: