在其他组件Angular中使用组件方法

Question

我刚刚学习 Angular，但在将方法传递给另一个组件时遇到了麻烦。 对象项有文档数组，我想删除给定 id 的文档

api / item / {itemId} / deleteDocument / {documentId}。此端点来自 springboot 后端并从数据库中的项目数组中删除文档。 这就是我所拥有的：

item.service.ts

@Injectable({
  providedIn: 'root'
})
export class ItemService {

  private serviceUrl = 'api/item/';
  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  constructor(private http: HttpClient) {}

  deleteDocument(itemId: number, documentId: number): Observable<any>{
    return this.http.delete(this.serviceUrl + itemId +'/deleteDocument/' + documentId).pipe();
  }

item-component.ts

这里我想从Item的文档列表中删除文档。

export class ItemComponent implements OnInit {
  item: ItemElem = new ItemElem();

  constructor(private itemService: ItemService, public route: ActivatedRoute) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.itemService.getById(id).subscribe(p => {
      this.item = p;
    });
    this.itemService.getDocumentList(id).subscribe(docList => {
      this.item.documents = docList;
    });
  }

  onDeleteDocument(document: DocumentListItem) {
    this.itemService.deleteDocument(this.item.id, document.id).subscribe(p => {
          this.item.documents = this.item.documents.filter(
            doc => doc.id !== document.id);
      });
  }

文档列表组件.ts

deleteItem(element) {
   // HERE
  }



private prepareDocumentActions() {
    return [
      {
        name: 'edit',
        makeAction: (elem: DocumentListItem) => {
          window.open(elem.documentOpenUrl);
        }
      {
        name: 'delete',
        makeAction: (elem: DocumentListItem) => {
            this.deleteItem(elem.id);
        }
      },
    ];
  }

和html：

  <div fxLayout="row" fxLayoutAlign="space-around none" >
          <div *ngFor="let action of documentActions">
            <button mat-icon-button color="primary" (click)="action.makeAction(element)">
              <mat-icon class="md-24">{{action.name}}</mat-icon>
            </button>
          </div>
          </div>

所以，我想提供从 item-component.ts 到 document 到 document-list-component.ts 的方法，在那里我有 deleteDocument() 方法。在视图中，我有一个按钮，单击后将从 Item 中的文档数组中删除文档，当然还有从 db 中删除文档。

这可能是一项微不足道的任务，但我每天都在 java 和 sprinboot 中工作，而且我不知道 Angular。如有任何帮助，我将不胜感激。

你好！！

Answer 1

所以，我从您的问题推测 document-list-component.ts 是您的父组件，item-component.ts 是您的子组件。现在，您从 document-list-component.ts 打开一个项目，然后从子组件中删除该项目。最后，您想从父组件的集合中删除该项目。
所以，如果我是正确的，您可以在 item-component.ts 中使用 public onDelete: EventEmitter<number> = new EventEmitter() 并从 document-list-component.ts 订阅该事件，同时打开子组件。
要订阅您编写的方法，例如您在哪里创建该组件=>

 let itemCompo: ItemComponent =new ItemComponent();
  this.subscription = itemCompo.onDelete.subscribe(num=> this.deleteItem(num));

注意：您可以通过这两个链接查看如何在 Angular 中使用 EventEmitter
1。 Link
2. Link 请检查并告诉我。