在Angular 2中将函数从Parent传递给Child组件

Question

我在Parent Component中有一个Array（> library(tseries) > library(zoo) ts<-read.table(file.choose(),header=TRUE) ts rdate Close Date 1 8/1998 302.91 0 2 9/1998 373.52 100 3 10/1998 405.33 200 4 11/1998 501.47 300 5 12/1998 586.13 400 6 1/1999 591.43 500 7 2/1999 542.23 600 8 3/1999 502.82 700 9 4/1999 674.96 800 10 5/1999 743.04 900 11 6/1999 811.10 1000 12 7/1999 768.69 1100 13 8/1999 767.06 1200 14 9/1999 675.45 1300 15 10/1999 742.87 1400 16 11/1999 734.66 1500 17 12/1999 812.33 1600 18 1/2000 922.10 1700 19 2/2000 982.24 1800 20 3/2000 974.38 1900 21 4/2000 898.35 2000 22 5/2000 911.51 2100 23 6/2000 833.37 2200 24 7/2000 798.83 2300 25 8/2000 795.84 2400 26 9/2000 713.51 2500 27 10/2000 752.36 2600 28 11/2000 729.95 2700 29 12/2000 679.64 2800 30 1/2001 727.73 2900 31 2/2001 709.39 3000 32 3/2001 647.48 3100 33 4/2001 584.50 3200 34 5/2001 572.88 3300 35 6/2001 592.99 3400 36 7/2001 659.40 3500 37 8/2001 687.16 3600 38 9/2001 615.34 3700 39 10/2001 600.07 3800 40 11/2001 638.02 3900 41 12/2001 696.09 4000 42 1/2002 718.82 4100 43 2/2002 708.91 4200 44 3/2002 756.10 4300 45 4/2002 793.99 4400 46 5/2002 741.76 4500 47 6/2002 725.44 4600 48 7/2002 721.59 4700 49 8/2002 711.36 4800 50 9/2002 638.01 4900 51 10/2002 659.57 5000 52 11/2002 629.22 5100 53 12/2002 646.32 5200 54 1/2003 664.77 5300 55 2/2003 646.80 5400 56 3/2003 635.72 5500 57 4/2003 630.37 5600 58 5/2003 671.46 5700 59 6/2003 691.96 5800 60 7/2003 720.56 5900 61 8/2003 743.30 6000 62 9/2003 733.45 6100 63 10/2003 817.12 6200 64 11/2003 779.28 6300 65 12/2003 793.94 6400 66 1/2004 818.94 6500 67 2/2004 879.24 6600 68 3/2004 901.85 6700 69 4/2004 838.21 6800 70 5/2004 810.67 6900 71 6/2004 819.86 7000 72 7/2004 833.98 7100 73 8/2004 827.98 7200 74 9/2004 849.96 7300 75 10/2004 861.14 7400 76 11/2004 917.19 7500 77 12/2004 907.43 7600 78 1/2005 916.27 7700 79 2/2005 907.38 7800 80 3/2005 871.35 7900 81 4/2005 878.96 8000 82 5/2005 860.73 8100 83 6/2005 888.32 8200 84 7/2005 937.39 8300 85 8/2005 913.56 8400 86 9/2005 927.54 8500 87 10/2005 910.76 8600 88 11/2005 896.13 8700 89 12/2005 899.79 8800 90 1/2006 914.01 8900 91 2/2006 928.94 9000 92 3/2006 926.63 9100 93 4/2006 949.23 9200 94 5/2006 927.78 9300 95 6/2006 914.69 9400 96 7/2006 935.85 9500 97 8/2006 958.12 9600 98 9/2006 967.55 9700 99 10/2006 988.30 9800 100 11/2006 1080.66 9900 101 12/2006 1096.24 10000 102 1/2007 1189.35 10100 103 2/2007 1196.45 10200 104 3/2007 1246.87 10300 105 4/2007 1322.25 10400 106 5/2007 1346.89 10500 107 6/2007 1354.38 10600 108 7/2007 1373.71 10700 109 8/2007 1273.93 10800 110 9/2007 1336.30 10900 111 10/2007 1413.65 11000 112 11/2007 1396.98 11100 113 12/2007 1445.03 11200 df <- data.frame(ts) df <- data.frame(Date=df$Date,Y=df$Close) df <- df[!is.na(df$Y),] library(minpack.lm) library(ggplot2) f <- function(pars, xx){pars$a+pars$b*(pars$tc-xx)^pars$m* (1+pars$c*cos(pars$omega*log(pars$tc-xx)+pars$phi))} resids <- function(p,observed,xx){df$Y-f(p,xx)} nls.out<-nls.lm(par=list(a=7.048293, b=-8.8e-5, tc=112000, m=0.5, omega=3.03, phi=-9.76, c=-14), fn=resids, observed=df$Y, xx=df$days, control=nls.lm.control(maxiter=1024, ftol=1e-6, maxfev=1e6)) par <- nls.out$par nls.final<-nls(Y~a+(tc-days)^m*(b+c*cos(omega*log(tc-days)+phi)), data=df, start=par, algorithm="plinear", control=nls.control(maxiter=1024, minFactor=1e-8)) ），根据这个数组的大小，子组件（Reusable）附加到Parent组件。

mMemberCount

子组件如下

<member-template *ngFor="let item of mMemberCount" [title]="item.relation" [memberid]="item.id" (update)="update($event)">
</member-template>

<div class="btn_container">
  <button class="button orange" type="submit">Submit</button>
</div>

@output（'update'）工作正常。我想从ParentComponent中调用ChildComponent （MemberTemplateComponent）的 sendDataToParent（）。我的意思是当用户点击父组件的按钮提交时，此 @Component({ selector: 'member-template', templateUrl: './member-template.component.html', styleUrls: ['./member-template.component.scss'], providers: [], }) export class MemberTemplateComponent implements OnInit { TAG: string = " MEMBER-TEMPLATE: "; // Input variables wil be taken from the calling @Input('title') title: string; @Input('memberid') memberId: number; @Output('update') datasubmit: EventEmitter<string> = new EventEmitter<string>(); sendDataToParent(){ let output = "Tetsing Eventemitter"; this.datasubmit.emit(output); } } 应该调用

Answer 1

更新时间：11/15/17

您可以使用@ViewChild

来实现此目的

<强>为父级

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component }                from '@angular/core';
import { MemberTemplateComponent }  from './member.template.component';

@Component({
      selector: 'parent-template',
      templateUrl: './parent-template.component.html',
      styleUrls: ['./parent-template.component.scss'],
      providers: []
})

export class ParentTemplateComponent implements OnInit {
    @ViewChild(MemberTemplateComponent) private childComponent: MemberTemplateComponent;
    ngAfterViewInit() {
         submit() {
              this.childComponent.sendDataToParent(); 
         }
    }
}

Answer 2

终于找到了解决方案 我在ParentComponent中使用了@ViewChildren

  @ViewChildren('component') components: QueryList<MemberTemplateComponent>;

子组件 -

<member-template #component *ngFor="let item of mMemberCount" [title]="item.relation" [memberid]="item.id" (update)="update($event)">
</member-template>

迭代Component QueryList

 this.components.forEach(component => {
      component.callChildMethod();
    });

现在从parentComponent

调用多个子组件的callChildMethod（）

干杯...