Angular 5 EventEmitter 无法正常工作

Posted 2023-02-23

【中文标题】Angular 5 EventEmitter 无法正常工作

【英文标题】：Angular 5 EventEmitter Not working well

【发布时间】：2018-04-22 09:03:24

【问题描述】：

我正在尝试在子组件上调用父组件函数，并像这样实现。

project-form.component.ts

@Component(
  selector: 'app-project-form',
  templateUrl: './project-form.component.html',
  styleUrls: ['./project-form.component.css'],
  encapsulation: ViewEncapsulation.None
)
export class ProjectFormComponent implements OnInit 

  @Input() project: Project;
  @Output() createProject = new EventEmitter<string>();

  newProject()  
    console.log("submit");
    this.createProject.emit('submit');
   

project-form.component.html

<button (click)="newProject()" class = "btn-success" >New</button>

project-view.component.ts

export class ProjectViewComponent implements OnInit 

  projects: Project[];
  projectform: Project;

  createProject(event)
    console.log("create Project on parent component");
  

project-view.component.html

<app-project-form [project]="projectform" (createProject)="createProject($event)"></app-project-form>

这里当我点击子组件的New按钮时，我只能在控制台看到"submit"，而看不到"create Project on parent component"。

这意味着没有发出事件或没有收到父事件。 基本上，我错过了一些东西。 请为我分享任何类型的热门歌曲。

【参考方案1】：

你错过了一件事@artgb，createProject(event:string) 你试试这个。

【讨论】：

感谢您的推荐 @Jacobys527，它的工作原理很迷人，您能解释一下 angular 5 上的 createProject(event:string) 和 createProject(event) 之间的区别吗？所有的定义都没有错误。

嗨@artgb，一些没有类型的函数定义效果很好，其中一些应该有，我不知道它们的区别，但无论如何它都有效。我很高兴听到你的工作很好。

有点奇怪，但这个解决方案也对我有用。在我的情况下，我能够点击父函数，但无法通过发射器传递数据。 +1 解决方案。

对我来说它不起作用请帮助！我有几乎相同的代码，但它只是不工作

【参考方案2】：

实际上我尝试了您的代码，它在 Angular 5.0.0 上运行良好。单击新建（“提交”和“创建项目...”）时，我收到两条控制台消息。我认为您的问题可能与 EventEmitter 没有直接关系。您提供的代码 sn-ps 可以直接编译并运行以下修改（如果您想测试它）：

添加缺失的导入

添加 ngOnInit

删除所有引用“项目”模型的属性

所以我找不到您当前的代码有什么问题。您的问题可能出在其他地方。

【讨论】：

1.所有导入都已完成，因为没有发生导入错误。 2. ngOnInit 可用，但未添加到问题中，因为与 eventemit 无关。 3. 在我的问题中，Project 不相关。

因为我实际上尝试了你的代码 sn-p，所以我不得不假设它在其他部分，你没有共享。我的建议是尝试在 ngOnInit 函数中注释代码，然后重试。对不起，这是我能用手头的信息做的最好的事情。