Question

我的所有事件发射器都正常工作，除了一个。

child.ts：

@Component({
    ... 
    outputs: ['fileUploaded']
    })

export class childComponent implements OnInit {
  ...
  fileUploaded = new EventEmitter<boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

从我将要显示的父组件中调用randomMethod（） parent.ts。它不会在child.html中调用。

parent.html

...
<child (fileUploaded)="onSubmit($event)"></child>
..

parent.ts

export class parentComponent {
   ...
   theChild = new childComponent;
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
     this.theChild = new childComponent;
  }
}

我的应用程序从不记录“onSubmit（）”，为什么不调用此方法？我也尝试不在我的最后一行创建一个新的子对象，但这没有什么区别。

Answer 1

也许我还没清楚为什么你选择这种方法或者你需要它，但据我所知，你应该使用孩子的EventEmitter到它的家长。这意味着触发 .emit（） shold的事件将被放置在child.html中。尝试这样做，它应该工作：

<强> child.html

<div (click-or-whatever-fires-what-you-want)="randomMethod()"></div>

<强> child.ts：

@Component({
    ... 
    })

export class childComponent implements OnInit {
  ...
  @Output() fileUploaded = new EventEmitter<boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

<强> parent.html

...
<child (fileUploaded)="onSubmit($event)"></child>
..

<强> parent.ts

export class parentComponent {
   ...
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }
}

希望它有用。

Answer 2

您可以使用@Output发射器从子组件调用父组件的方法，该发射器将触发子组件上的任何事件。我在评论部分使用这种方法来使用子组件的方法更新父组件中的计数。

Parent.ts

/** Update the count from child component */
UpdateCount(id) {
this.getTotalCommentCountByGroupId(id);
}

Parent.HTML

 <srv-group-feed [LiveFeedInput]="groupPostRes" 
 (CommentCount)="UpdateCount($event)"></srv-group-feed>

Child.ts

 this.CommentCount.emit(data you need to pass);

并且在全局范围内，您可以在子组件中声明@Output事件，即child.ts

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

Answer 3

以这种方式尝试：

@Output()
  fileUploaded = new EventEmitter<boolean>();

并删除：

outputs: ['fileUploaded']

检查文档here！：d

Answer 4

您不应该使用new运算符创建子组件。

您应该使用@ViewChild()来引用子组件。

Answer 5

您选择的子组件是错误的，您应该使用ViewChild，如下所示：

<强> parent.html：

<child #theChild (fileUploaded)="onSubmit($event)"></child>

<强> parent.ts：

export class parentComponent {
   ...
   @ViewChild('theChild') theChild;
   submitted = false;
   ...
   onSubmit(event: boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
  }
}

Angular 4 - 从子组件调用父方法不起作用

5 个答案: