Angular 5 EventEmitter 运行不正常

Question

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

项目-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');
   }
}

项目-form.component.html

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

项目-view.component.ts

export class ProjectViewComponent implements OnInit {

  projects: Project[];
  projectform: Project;

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

项目-view.component.html

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

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

表示事件未发出或父级未收到事件。基本上，我错过了一些东西。
请为我分享任何类型的点击。

Answer 1

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

Answer 2

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

添加缺失的导入
添加 ngOnInit
删除所有引用 'Project' 模型的属性

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

Angular 5 EventEmitter 运行不正常

Angular 5 EventEmitter Not working well

components

eventemitter

typescript

angular