Question

我想要一个通用列表组件，它将注入一个'fetch''方法。这不通过'@input'工作，所以我尝试输出，但它也因某些原因不起作用。我怎么能这样做，为什么这不起作用？

为父级

HTML 的

fetch(stuff) {        
    console.log('fetching'); //this doesn't get called...
    this.dataservice.get().subscribe(data=>{
    console.log('fetched');
    stuff(data);
    });
 }

打字稿

@Output()
requestedFetch:EventEmitter<Function> = new EventEmitter<Function>  );                

constructor()
{            
   console.log('requesting data');
   this.requestedFetch.emit(this.setData);
}

setData(data) {
   console.log('found data');
  //do stuff with the fetched Data
}

Listcomponent

[root@vmi125816 ~]# cpan use MIME::Base64;
Reading '/root/.cpan/Metadata'
  Database was generated on Fri, 30 Jun 2017 23:29:02 GMT
Running install for module 'use'
Running make for A/AU/AUDREYT/use-0.05.tar.gz
Checksum for /root/.cpan/sources/authors/id/A/AU/AUDREYT/use-0.05.tar.gz ok

  CPAN.pm: Building A/AU/AUDREYT/use-0.05.tar.gz

Cannot determine license info from lib/use.pm
Checking if your kit is complete...
Looks good
Generating a Unix-style Makefile
Writing Makefile for use
Writing MYMETA.yml and MYMETA.json
cp lib/use/perl5.pm blib/lib/use/perl5.pm
cp lib/use.pm blib/lib/use.pm
Manifying 2 pod documents
  AUDREYT/use-0.05.tar.gz
  /usr/bin/make -- OK
Running make test
PERL_DL_NONLAZY=1 "/usr/bin/perl" "-MExtUtils::Command::MM" "-MTest::Harness" "-e" "undef *Test::Harness::Switches; test_harness(0, 'inc', 'blib/lib', 'blib/arch')" t/*.t
t/0-signature.t .. ok
t/1-basic.t ...... Undefined subroutine &main::ok called at t/1-basic.t line 2.
# Looks like your test exited with 255 before it could output anything.
t/1-basic.t ...... Dubious, test returned 255 (wstat 65280, 0xff00)
Failed 1/1 subtests

Test Summary Report
-------------------
t/1-basic.t    (Wstat: 65280 Tests: 0 Failed: 0)
  Non-zero exit status: 255
  Parse errors: Bad plan.  You planned 1 tests but ran 0.
Files=2, Tests=1,  0 wallclock secs ( 0.02 usr  0.00 sys +  0.05 cusr  0.01 csys =  0.08 CPU)
Result: FAIL
Failed 1/2 test programs. 0/1 subtests failed.
make: *** [test_dynamic] Error 255
  AUDREYT/use-0.05.tar.gz
  /usr/bin/make test -- NOT OK
//hint// to see the cpan-testers results for installing this module, try:
  reports AUDREYT/use-0.05.tar.gz
Running make install
  make test had returned bad status, won't install without force
MIME::Base64 is up to date (3.15).
[root@vmi125816 ~]#

编辑将onRequestedFetch更改为requestedFetch并添加了注释。仍然不起作用：（

Answer 1

您的输出变量为requestedFetch，而您在HTML中使用onRequestFetch。

将其修改为

<app-list (requestedFetch)="fetch($event)"></app-list>

Answer 2

执行

this.requestedFetch.emit(this.setData);

在OnInit而不是构造函数中：

ngOnInit() {
  this.requestedFetch.emit(this.setData);
}

检查Difference between Constructor and ngOnInit

当我们在OnInit中调用它时，我们确信Angular已经完成了创建组件，并且我们拥有了所需的一切。

<强> DEMO

Angular2事件发射器无法处理

2 个答案: