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

【问题标题】：Angular 4 - Calling a parent method from a child component not workingAngular 4 - 从子组件调用父方法不起作用
【发布时间】：2017-12-15 14:49:55
【问题描述】：

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

child.ts：

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

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

}

randomMethod() 是从父组件调用的，我将在父.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()”，那么为什么不调用这个方法呢？我还尝试不在最后一行创建新的子对象，但这并没有什么不同。

【问题讨论】：

尝试使用@Output 装饰器，查看更多：learnangular2.com/outputs

标签： angular typescript data-binding eventemitter

【解决方案1】：

也许我不清楚你为什么选择这种方法或你需要它的原因，但据我所知，你应该使用从孩子到父母的EventEmitter。这意味着触发 .emit() 的事件应该放在 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;
  }
}

希望对您有所帮助。

【讨论】：

从 child.html 调用 randomMethod() 对我的应用程序没有意义。它需要在 randomMethod() 中触发，也需要从父组件调用
好的，这就是“我不清楚你为什么选择这种方法”部分。 ;) 嗯...我不知道，看起来您正在尝试：从父级触发子方法，然后子方法执行某些操作并触发发射。父级捕获子级事件发出并自行触发其事件。这样对吗？如果是的话，设置一个服务不是更好吗？
谢谢 +1 帮助很大

【解决方案2】：

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

父母.ts

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

父.HTML

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

Child.ts

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

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

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

【讨论】：

【解决方案3】：

试试这个方法：

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

然后删除：

outputs: ['fileUploaded']

检查文档here！ :D

【讨论】：

谢谢，不幸的是没有运气。它一定与我在父组件中创建子对象然后期望返回给调用它的父对象有关吗？也许没有在子 html 中发出事件？这些是这个和我的其他事件发射器之间的唯一区别。
@Hiding 你不能用选择器来实例化子组件而不是使用theChild = new childComponent;吗？

【解决方案4】：

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

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

【讨论】：

【解决方案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();
     ...
  }
}

【讨论】：