首页 文章

Angular2子组件删除

提问于
浏览
4

我有一个有角度的应用,我有一个问题 . 我有一个(父)组件,它有一个项目数组,每个项目都有一个子(子)组件 . 子组件每个都有一个按钮(和函数)来自行删除,但父组件没有被通知发生此事件 .

我不确定删除子组件的正确方法是什么,父组件将其从视图中删除 . 我目前只是调用 delete this.product (产品是父数组中的项目之一)确实将其从父数组中删除,但父数组不更新 .

1 回答

  • 8

    您可以在子组件中以这种方式实现:

    @Component({
      selector: 'child',
      template: `
        <div>
          {{element.name}}
          <span (click)="deleteElement()">Delete</span>
        </div>
      `
    })
    export class ChildComponent {
      @Input()
      element: any;
      @Output()
      elementDeleted: EventEmitter<any> = new EventEmitter();
    
      deleteElement() {
        this.elementDeleted.emit();
      }
    }
    

    并在父级中利用此事件:

    @Component({
      selector: 'child',
      template: `
        <div>
          <child *ngFor="#element of elements" [element]="element"
                 (elementDeleted)="onElementDeleted(element)">
          </child>
        </div>
      `
    })
    export class ParentComponent {
      constructor() {
        this.elements = [
          { name: 'element1' },
          { name: 'element2' },
          (...)
        ];
      }
    
      onElementDeleted(element) {
        var index = this.elements.findIndex((elt) => (elt===element));
        if (index != -1) {
          this.elements.splice(index, 1);
        }
      }
    

相关问题