Question

我有一个图库项目组件

import {Component, OnInit, Input} from '@angular/core';
import {Image} from '../Image';

@Component({
  selector: 'app-gallery-item',
  template: '<mat-card class="example-card">\
        <mat-card-header>\
          <mat-card-title>{{image.title}}</mat-card-title>\
        </mat-card-header>\
        <img mat-card-image [src]="image.url">\
        <button mat-button (click)="onDeleteImage($event, image.id)">DELETE</button>\
  </mat-card>',
  styleUrls: ['./gallery-item.component.css']
})
export class GalleryItemComponent implements OnInit {
  @Input()
  image: Image;
}

我有一个元件库

import { Component, Input } from '@angular/core';
import {Image} from '../image';


@Component({
  selector: 'app-gallery-container',
  template: '<app-gallery-item *ngFor="let image of images" [image]="image">\
    </app-gallery-item>',
  styleUrls: ['./gallery.component.css']
})
export class GalleryContainerComponent  {
  @Input()
  images: Image[];

  onDeleteImage(event, index: number) {
    console.log('Delete image');
    for (let i = 0; i < this.images.length; i++) {
      if (this.images[i].id === index) {
        this.images.splice(i, 1);
      }
    }
  }
}

我需要单击DELETE按钮以从图库中删除图像。我尝试实现它，但是遇到了这个问题。浏览器写到onDeleteImage不是函数和错误上下文。我了解我无法正确链接这两个组件。请帮我解决这个问题

Answer 1

您的onDeleteImage在单击事件触发的父组件上，而不在子组件上。

如果您希望将该功能保留在父组件中，那么您需要做的是将事件从子组件发送到父组件。

你怎么做到的？

将输出添加到您的子组件，使其发出事件并显示事件

import {Component, OnInit, Input, Output} from '@angular/core';
import {Image} from '../Image';

@Component({
  selector: 'app-gallery-item',
  template: '<mat-card class="example-card">\
        <mat-card-header>\
          <mat-card-title>{{image.title}}</mat-card-title>\
        </mat-card-header>\
        <img mat-card-image [src]="image.url">\
        <button mat-button (click)="deleteImage()">DELETE</button>\
  </mat-card>',
  styleUrls: ['./gallery-item.component.css']
})
export class GalleryItemComponent implements OnInit {
  @Input()
  image: Image;
  @Output() onDelete: EventEmitter<void> = new EventEmitter();

 public deleteImage() {
  this.onDelete.emit();
 }
    }

在父组件中，添加onDeleteImage事件触发时应该发生的情况

import { Component, Input } from '@angular/core';
import {Image} from '../image';


@Component({
  selector: 'app-gallery-container',
  template: '<app-gallery-item *ngFor="let image of images" [image]="image" (onDelete)="onDeleteImage(image)">\
    </app-gallery-item>',
  styleUrls: ['./gallery.component.css']
})
export class GalleryContainerComponent  {
  @Input()
  images: Image[];

  onDeleteImage(index: number) {
      this.images.splice(index, 1);
  }
}

Answer 2

您需要将事件从GalleryItemComponent发射到GalleryContainerComponent，以便GalleryContainerComponent可以删除图像。您可以进行以下代码更改来实现此目的：

GalleryItemComponent内部：

import {Component, OnInit, Input} from '@angular/core';
import {Image} from '../Image';

@Component({
  selector: 'app-gallery-item',
  template: '<mat-card class="example-card">\
             <mat-card-header>\
               <mat-card-title>{{image.title}}</mat-card-title>\
            </mat-card-header>\
            <img mat-card-image [src]="image.url">\
            <button mat-button 
                 (click)="onDeleteImage(image.id)">DELETE</button>\
        </mat-card>',
  styleUrls: ['./gallery-item.component.css']
})
export class GalleryItemComponent implements OnInit {
  @Input()
  image: Image;
  @Output() deleteImage: EventEmitter<any> = new EventEmitter();

  onDeleteImage(id){
     this.deleteImage.emit({imageId: id});
  }

}

内部GalleryContainerComponent：

import { Component, Input } from '@angular/core';
import {Image} from '../image';
@Component({
    selector: 'app-gallery-container',
    template: '<app-gallery-item (deleteImage)="onDeleteImage($event)" *ngFor="let image of images"\ 
               [image]="image">\
               </app-gallery-item>',
    styleUrls: ['./gallery.component.css']
})
export class GalleryContainerComponent  {
    @Input()
    images: Image[];

    onDeleteImage(event) {
        const index = event.imageId;
        console.log('Delete image');
        for (let i = 0; i < this.images.length; i++) {
            if (this.images[i].id === index) {
                this.images.splice(i, 1);
        }
    }
 }
}

Answer 3

在GalleryItemComponent中，我们称为“ onDeleteImage（）”。但是该定义位于父组件GalleryContainerComponent内部。

您可以使用“ EventEmitter”将事件从“ GalleryItemComponent”更改为“ GalleryContainerComponent”。在GalleryContainerComponent模板中捕获事件，然后调用“ onDeleteImage（）”方法。

如何使用一个组件上的按钮将项目从集合中移除到另一个组件？

3 个答案: