javascript - 使用 angular 从指令中的 API 调用更新组件数据

Question

我是 Angular 的新手，遇到了一个问题。我创建了一个带有 .net 核心 web api 后端的简单 Angular 应用程序，但我在根据我为处理鼠标点击而制定的指令更新组件数据时遇到问题。

我希望发生的情况是，当单击鼠标时，get 请求返回数据并更新页面。我已经阅读了观察者模式并正在使用“rxjs”实现。

这对于初始页面加载工作正常，但当我单击时，我希望它发送另一个请求并更新页面上的数据。任何帮助将不胜感激!

这是我正在测试的组件 Html

<div class="container">
  <div class="testDiv" appApplyitemclick>
    <img src="######" />
  </div>
  <div class="ShowDiv" *ngFor="let stat of storedItem.statistics" >
    <p>{{stat.name}}</p>
  </div>
</div>

这是我的组件TS

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

import { ItemAPIService } from '../Services/item-api.service';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.scss']
})
export class ItemComponent implements OnInit {

  public storedItem: Object = new Object();

  constructor(public ItemApi: ItemAPIService) {

  }

  ngOnInit() {
    this.ItemApi.GetItem().subscribe(x => {
      storedItem = x;
    });
  }
}

这是我的指令

import { Directive, HostListener} from '@angular/core';
import { ItemAPIService } from '../Services/item-api.service'
@Directive({
  selector: '[appApplyitemclick]'
})
export class ApplyitemclickDirective {

  constructor(private api: ItemAPIService) { }

  @HostListener("click", ["$event"])
  public onMouseClick(event: any): void {

     // I WANT TO TO CALL THE API AND UPDATE THE PAGE HERE 
     // this.ItemApi.GetItem()
    }
}

这是我简单的 web api 服务

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

  constructor(private http: HttpClient) { }

  GetItem() {
    return this.http.get("http://localhost:1262/api/Item/get");
  }
}

Answer 1

您可以简单地在指令类 ApplyitemclickDirective 中注入(inject)宿主组件 ItemComponent 实例并刷新 storedItem 字段中的数据:

export class ApplyitemclickDirective {

  constructor(private api: ItemAPIService, private host: ItemComponent) { }

  @HostListener("click", ["$event"])
  public onMouseClick(event: any): void {

    //call API and update the state of the host component
     this.api.GetItem().subscribe(data =>{
     this.host.storedItem = data;

    });
   }
}