Question

我有父组件（主）中的项目列表，当用户单击其中一个项目时，在同一页面上的另一个组件（子/详细信息）中，它显示所选项目的详细信息。我在子组件中有一个删除按钮，用于从数据库中删除所选项。

我的问题是如何在删除子组件中的项目后更新父组件中的项目列表？

父组件：

export class ProjectListComponent implements OnInit {

  projects : Project[];
  selectedProject: Project;

  constructor(private _projectService: ProjectService) { }

  ngOnInit() {
    this.projects = [];
    this.fetchListOfProjects();
  }

  fetchListOfProjects(){
  this._projectService.getProject()
      .subscribe(projects => {
          this.projects = projects;
       })
   }

   onSelect(project: Project): void {
   this.selectedProject = project;
   }
}

子组件：

export class ProjectItemComponent implements OnInit {
 @Input() project: Project;
 constructor(private _projectService:ProjectService) { }

 ngOnInit() { }

 onDelete(id:any){
   if(confirm("Are you sure to delete the project?")) {
     this._projectService.deleteProject(id)
       .subscribe(result =>{        
        if(result.status == 204){
          console.log('removed');
        };
      }); 
   }       
 }
}

Answer 1

export class ProjectItemComponent implements OnInit {
 @Input() project: Project;
 constructor(private _projectService:ProjectService) { }

 @Output()
 someEvent = new EventEmitter();

 ngOnInit() { }

 onDelete(id:any){
   if(confirm("Are you sure to delete the project?")) {
     this._projectService.deleteProject(id)
       .subscribe(result =>{        
        if(result.status == 204){
          console.log('removed');
          this.someEvent.emit(null);
        };
      }); 
   }       
 }

<project-item (someEvent)="update()"

这样，当在子项中删除项目时，在父项上调用update()。

Angular 4如何在删除子组件中的项目后更新父组件

1 个答案: